javascript使用blob從本地硬盤加載圖像

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;

沒有該參數，符號“事件”將引用該封閉函數的參數，並且該文件將沒有文件內容。

另外，我認為您不需要通過atob和btoa進行base64編碼/解碼，因為將畫布內容轉換為數據URL的結果無論如何都是base64字符串。

Answer 2

如果有人想知道，有一種更簡單的讀取文件的方式：

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