javascript使用blob从本地硬盘加载图像

Question

The following code should be able to save and load .png image to/from local hard drive. 以下代码应能够将.png图像保存到本地硬盘或从本地硬盘加载。

Saving works fine(at least in chrome) but loading produces wrong url and display nothing.. 保存工作正常（至少在Chrome中有效），但加载会产生错误的网址，并且什么也不显示。

A little help would be really appreciated! 一点帮助将不胜感激！

<html>
<head>
    <title></title>
</head>
<body>
    <img id="img" /><br>
    <input type="button" value="Save" onclick="onSave()" /><br />
    <input type="file" onchange="onOpen(event)" /><br />

    <script>

        onSave = function () {
            var canvas = document.createElement("canvas");
            canvas.width = 200;
            canvas.height = 200;

            var ctx = canvas.getContext("2d");
            ctx.fillRect(0, 0, 100, 150);

            var dataURL = canvas.toDataURL("image/png");
            var img64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

            var binaryImg = atob(img64);
            var length = binaryImg.length;
            var ab = new ArrayBuffer(length);
            var ua = new Uint8Array(ab);
            for (var i = 0; i < length; i++) {
                ua[i] = binaryImg.charCodeAt(i);
            }

            var blob = new Blob([ab]);

            var a = document.createElement("a");
            a.download = 'Blob_img';
            a.innerHTML = "Download File";
            a.href = window.webkitURL.createObjectURL(blob);
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        };


        onOpen = function (event) {
            var fileReader = new FileReader();
            fileReader.onload = function (event) {
                var ab = event.target.result;

                var ua = new Uint8Array(ab);

                var binaryImg;
                for (var i = 0; i < ua.length; i++) {
                    binaryImg += String.fromCharCode(ua[i]);
                }
                var img64 = btoa(binaryImg);

                var image = new Image();
                image.src = 'data:image/png;base64,' + img64;

                var img = document.getElementById('img');
                img.src = image.src;
            }
            fileReader.readAsArrayBuffer(event.target.files[0]);
        };

    </script>
</body>
</html>

Answer 1

Your "load" handler for your FileReader is declared without an event parameter. 声明FileReader “加载”处理程序时不带event参数。 As a result, it's not going to have access to the file contents. 结果，它将无法访问文件内容。

        fileReader.onload = function (event) {
           var ab = event.target.result;

Without that parameter, the symbol "event" would refer to the parameter of the enclosing function, and that one won't have the file contents. 没有该参数，符号“事件”将引用该封闭函数的参数，并且该文件将没有文件内容。

Also, I think you don't need to do the base64 encoding/decoding via atob and btoa , because the results of converting the canvas contents to a data URL will be a base64 string anyway. 另外，我认为您不需要通过atob和btoa进行base64编码/解码，因为将画布内容转换为数据URL的结果无论如何都是base64字符串。

Answer 2

In case somebody is wondering, there is a simpler way of reading the file: 如果有人想知道，有一种更简单的读取文件的方式：

FileReader.readAsDataURL

Check a working example at https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL . 在https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader.readAsDataURL上查看工作示例。

javascript使用blob从本地硬盘加载图像

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-01-09 15:29:38

解决方案2
1 2014-11-20 13:28:27

javascript使用blob从本地硬盘加载图像

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-01-09 15:29:38

解决方案2 1 2014-11-20 13:28:27

解决方案1
3 已采纳 2014-01-09 15:29:38

解决方案2
1 2014-11-20 13:28:27