[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

[devopg]

А зачем вы FileReader используете если есть более высокий уровень blob?

[DmitryOlkhovoi]

А подскажите как используя blob получить Data URL под превью и рендер на канвасе?

[monochromer]

image.src = URL.createObjectURL(file);

Затем этот же image после onload отрисовать на canvas через ctx.drawImage.
Пример — https://codepen.io/monochromer/pen/MWgOWyx?editors=0010

[DmitryOlkhovoi]

Спасибо, хороший вариант.
Второй раз ресурс по идее грузится не должен. Получается reader.onload заменяется image.onload

[FODD]

Можно даже не забивать память, получая Data URL. MDN.
Для Safari (13.1 точно) нужен полфил, в одном из проектов решилнакостылил так (TS)

Костыль

if (navigator.userAgent.toLocaleLowerCase().includes('safari')) {
    Object.defineProperty(HTMLMediaElement.prototype, 'srcObject', {
        // @ts-ignore
        get srcObject(): string|undefined {
            return this.__srcObject;
        },
        // @ts-ignore
        set srcObject(src: MediaProvider|undefined) {
            this.__srcObject = !!src ? URL.createObjectURL(src) : src;
        }
    });
}

После этого можно просто присваивать Blob или Stream напрямую в srcObject.

UPD: Странно. MDN говорит, что Blob для srcObject поддерживает только сафари, хотя я точно помню, что использовал эту фишку в хроме. Пойду смотреть, где ошибся

[monochromer]

Возможно, дело было с MediaStream?

[knotri]

Так в ресайзе же будет использоваться какая-то фильтрая (ну к примеру биленейная) которая далеко не факт что даст средний цвет ИМХО