HTML5 dataTransfer.setDragImage и Blobs

Question

Возможно ли использовать изображение с атрибутом src в качестве URL-адреса BLOB-объекта?

До сих пор (я использовал Chrome 66) я могу установить атрибут src изображения, используя data url, который, кажется, работает, учитывая, что я также добавляю изображение в тело документа (ошибка / требование в Chrome), но при установке src на URL-адрес BLOB-объекта (например, blob: http: //...) я получаю только значение по умолчанию / стандартный серый немного значок.

Кто-нибудь имеет опыт работы с HTML5 Drag and Drop и настройкой перетаскивания изображения?

Answer 1

BLOB-объектов поддерживаются.

В моем случае, это было на самом деле ширина и высота изображения, которые были установлены в 0, когда я использовал Blobs в качестве дополнительных переменных, которые я передавал со строкой URL моего BLOB-объекта, равными 0, так что когда-то это было обнаружено и исправлено, все работало прекрасно.

Я вставил фрагмент кода для тех, кто хочет знать, что я сделал ...

// Sample of the `svg` variable that I was using
var svg = {
    url: 'blob:http://.....',
    width: 0,
    height: 0
};

element.addEventListener('dragstart', function(evt) {
    // This was where sometimes my SVG object had 0 values.
    var width = Math.min(Math.max(+svg.width, 50), 25),
        height = Math.min(Math.max(+svg.height, 50), 25);

    // Have wrapped it inside a DIV, as I've noticed
    // on the internet a lot of issues resolved by doing so.
    // (your choice)
    div = document.createElement('div');
    img = new Image();
    // Using unescaped '#' characters in a data URI body is deprecated and will 
    // be removed in (Chrome) M67, around May 2018. Please use '%23' instead.
    // See (https://www.chromestatus.com/features/5656049583390720 for more details).
    img.src = svg.url.replace(/[#]/igm, '%23');
    img.width = width;
    img.height = height;
    div.style.position = 'absolute';
    div.classList.add('drag-image');

    // For Chrome, we need to add the Image to the DOM Also....
    // @see (https://stackoverflow.com/questions/43790022/html5-draggable-setdragimage-doesnt-work-with-canvas-on-chrome)
    div.style.zIndex = 1000;
    div.style.top = '100%';
    div.style.left = '100%';
    div.appendChild(img);
    document.body.appendChild(div);
    evt.dataTransfer.setDragImage(div, Math.round(width/2), Math.round(height/2));
});

ПРИМЕЧАНИЕ: Не уверен, как атрибут HTML5 hidden будет работать с добавленным элементом в DOM. Если у вас есть опыт работы с Drag Image, сообщите нам об этом с комментарием ниже. :)