Question

以下代码应该能够将.png图像保存到本地硬盘驱动器并从中加载。

保存工作正常（至少在chrome中）但加载会产生错误的网址并且不显示任何内容..

真的很感激一点帮助！

<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

您FileReader的“加载”处理程序是在没有event参数的情况下声明的。因此，它无法访问文件内容。

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

如果没有该参数，符号“event”将引用封闭函数的参数，并且该参数将不具有文件内容。

另外，我认为您不需要通过atob和btoa进行base64编码/解码，因为将画布内容转换为数据URL的结果无论如何都是base64字符串

Answer 2

如果有人想知道，有一种更简单的方法来阅读文件：

FileReader.readAsDataURL

查看https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL处的工作示例。

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

2 个答案: