Comments 8
А зачем вы FileReader используете если есть более высокий уровень blob?
А подскажите как используя blob получить Data URL под превью и рендер на канвасе?
image.src = URL.createObjectURL(file);Затем этот же image после onload отрисовать на canvas через ctx.drawImage.
Пример — https://codepen.io/monochromer/pen/MWgOWyx?editors=0010
Можно даже не забивать память, получая Data URL. MDN.
Для Safari (13.1 точно) нужен полфил, в одном из проектоврешилнакостылил так (TS)
После этого можно просто присваивать Blob или Stream напрямую в srcObject.
UPD: Странно. MDN говорит, что Blob для srcObject поддерживает только сафари, хотя я точно помню, что использовал эту фишку в хроме. Пойду смотреть, где ошибся
Для Safari (13.1 точно) нужен полфил, в одном из проектов
Костыль
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 поддерживает только сафари, хотя я точно помню, что использовал эту фишку в хроме. Пойду смотреть, где ошибся
Возможно, дело было с MediaStream?
Средний цвет по картинке проще получить через ресайз в 1 пиксель. Вы уж лучше бы что-нить поинтереснее придумали. Топ три оттенка (hue) по модели HSV например, для хромакея.
Sign up to leave a comment.
[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток