Question

i actually wondering why the only way of doing this is taking the binary data from the file, base64-encode it and then feed this encoded String into an Tag / HtmlImageElement

要么简单传真

<img src="data:image/jpeg;base64,xxxxxxxxxxxxx...">

或

let reader = new FileReader();
reader.readAsDataURL( droppedFile ); // this converts the binary data from the file into base64
reader.onloadend = () => {
    const img = new Image();
    img.src = reader.result;
    img.onloadend = () => { 
        console.log(`image ${droppedFile.name} loaded.`);
    }  
}

出色的业绩: 数据是基64-编码,将1MB图像转换成1.33MBSting(这确实需要时间),然后放在图像Element上,然后才重新编码(再次需要时间)。

为什么如此?

确实没有办法使用“PetdArray”(UInt8Arrays)?

浏览器在哪里对档案类型进行核对,并检索 let子和肥料的高度,请说丢弃了jpg文档?

Answer 1

我知道另一种最可能更快的方式。你直接拿到档案,将其改为反对L。

这样:

const input = document.querySelector("input"),
    img = document.querySelector("img")

input.addEventListener("change", () => {
    if (input.files.length) {
        const file = input.files[0],
            url = (window.URL || window.webkitURL).createObjectURL(file)

        img.src = url
    } else {
        img.src = ""
    }
})

<input type="file" />
<img src="" />

友情链接