HTML5 Canvas toDataURL在for循環中始終相同

Question

考慮一下這個JSFiddle 。 在其中，我選擇了一些照片，然后希望使用畫布對其進行base64編碼，以便將它們存儲在sessionStorage以進行延遲上傳。 因為我為多個文件設置了該文件，所以我遍歷每個文件並創建一個圖像和一個畫布，但是無論它看起來每次輸出完全相同的base64編碼圖像都是如此。 通過測試，我知道在每次循環迭代中，映像都是不同的，的確指向了不同的文件blob，但是畫布只是一遍又一遍地輸出相同的內容，我認為這也是文件列表中的最后一個文件。 有時它也只會輸出一個“數據”字符串，僅此而已。 如果有人能指出我正確的方向，我會喜歡的。

代碼如下所示：

的HTML

<style type="text/css">
    input[type="file"] {
        display: none;
    }

    a {
        display: inline-block;
        margin: 6px;
    }
</style>
<form action="#" method="post">
    <input type="file" accept="image/*" multiple />
    <button type="button">Select Photos</button>
</form>
<nav></nav>

的JavaScript

 console.clear(); $(function () { $("button[type=button]").on("click", function (e) { $("input[type=file]").trigger("click"); }); $("input[type=file]").on("change", function (e) { var nav = $("nav").empty(); for (var i = 0, l = this.files.length; i < l; i++) { var file = this.files[i], image = new Image(); $(image).on("load", i, function (e) { var canvas = document.createElement("canvas"), context = canvas.getContext("2d"); canvas.height = this.height; canvas.width = this.width; context.drawImage(this, 0, 0); nav.append("<a href=\\"" + canvas.toDataURL("image/jpeg") + "\\" target=\\"_blank\\">" + e.data + "</a>"); URL.revokeObjectURL(this.src); }); image.src = URL.createObjectURL(file); } }); }); 

Answer 1

但是無論每次看起來都輸出完全相同的base64編碼圖像都是如此。

.load()事件是異步的。 您可以使用$.when() $.Deferred() $.when() ， $.Deferred() ， $.map()代替for循環來處理異步加載的img元素。 注意，顯示a元素文本可能不是數字順序的； 可以通過對.then()的元素進行排序來調整； 盡管沒有在Question上解決，但如果需要，也可以按順序列出或加載圖像。

$("input[type=file]").on("change", function(e) {
    var nav = $("nav").empty();
    var file = this.files
    $.when.apply($, $.map(file, function(img, i) {    
      return new $.Deferred(function(dfd) {
        var image = new Image();
        $(image).on("load", i, function(e) {
          var canvas = document.createElement("canvas")
          , context = canvas.getContext("2d");   
          canvas.height = this.height;
          canvas.width = this.width;    
          context.drawImage(this, 0, 0);    
          nav.append("<a href=\"" 
                    + canvas.toDataURL() 
                    + "\" target=\"_blank\">" 
                    + e.data + "</a>");
          dfd.resolve()
          URL.revokeObjectURL(this.src);
        });
        image.src = URL.createObjectURL(img);
        return dfd.promise()
      })
    })).then(function() {
      nav.find("a").each(function() {
        console.log(this.href + "\n");
      })
    })
  });
})

jsfiddle https://jsfiddle.net/bc6x3s02/19/