javascript 如何在浏览器中将拖放的图像文件显示在画布上或显示为HtmlImageElement(< img>)

6fe3ivhb 于 2024-01-05 发布在 Java

关注(0)|答案(2)|浏览(159)

我实际上想知道为什么这样做的唯一方法是从文件中获取二进制数据，对它进行base64编码，然后将此编码的String馈送到Tag / HtmlImageElement中
作为纯HTML

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

字符串
或通过JavaScript

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.`);
    }  
}

型
奇怪的表演：数据是base64编码的，它将一个1 MB的图像转换为1.33MB的字符串（这确实需要时间），然后放置在图像元素中，只是为了再次解码（这又需要时间）以显示。
为什么会这样？
真的没有办法使用TypedArray的（UInt 8Arrays）代替吗？
浏览器到底在哪里检查文件类型并解码图像数据，比如说一个删除的jpg文件的宽度和高度？

JavaScript

来源：https://stackoverflow.com/questions/77718038/how-to-display-a-dropped-image-file-in-browser-on-a-canvas-or-as-a-htmlimageelem

2条答案

按热度按时间

qybjjes11#

我知道另一种可能更快的方法。你直接把文件转换成ObjectURL。
这样：

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 = ""
    }
})

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-05

kknvjkwl2#

在浏览器-Javascript世界中，有一种方法可以在这种情况下使用ImageDecoder跳过来回转换base64，但它是实验性的，目前Firefox还不支持。
因此，似乎没有办法跳过生产中丢失图像的转换问题。
幸运的是，我实际上在rust中构建了很多WASM的东西，使我能够使用image-crate自己将图像数据从jpg解码为位图。

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 如何在浏览器中将拖放的图像文件显示在画布上或显示为HtmlImageElement(< img>)

2条答案

相关问题

热门标签

最新问答