onload不使用createObjectURL在Firefox中觸發img.src

Question

我有以下代碼。它的工作原理非常好，正如預期的那樣，在Chrome中運行。但是，在Firefox中，它會記錄「CONVERT」，但永遠不會「LOADED」。沒有JS錯誤或任何東西。 onload只是不會觸發。我似乎無法在google或者stackoverflow上找到很多東西。許多人說的onload不火緩存的圖像，但這些不應該被緩存，即使他們是，我不會能夠緩存胸圍他們（右？）

flattenImage: function(file, callback){ 
    // Safari uses webkitURL 
    var URL = window.URL || window.webkitURL; 
    var canPreformat = !!(window.Blob && window.Uint8Array && URL && URL.createObjectURL); 

    // If we have all features we need to preformat on the client and the image 
    // isn't already flattened (jpeg), DO IT 
    if (canPreformat && !file.type.test(/jpe?g/i)) { 
     console.log('CONVERT'); 
     var thiz = this; 
     var c = document.createElement('canvas'); 
     var ctx = c.getContext('2d'); 
     var img = new Image; 
     // Makes a blob URL from the file given. 
     img.onload = function() { 
     console.log('LOADED'); 
     c.width = this.width; 
     c.height = this.height; 

     // Take the img that was added and copy it to the canvas 
     ctx.drawImage(img, 0, 0); 

     // Put the image on top of everything else 
     ctx.globalCompositeOperation = 'destination-atop'; 

     // Any transparency should become white (instead of the default black) 
     ctx.fillStyle = "#fff"; 
     ctx.fillRect(0, 0, this.width, this.height); 

     // Save canvas as a base64'd jpeg 
     var dataURL = c.toDataURL("image/jpeg"); 

     // The following blob lines take the base64 encoded image and then 
     // convert it to a jpeg "file". This allows us to do a real file 
     // upload rather than needing to send a base64 string. 
     var blobBin = atob(dataURL.split(',')[1]); 
     var array = []; 
     for(var i = 0; i < blobBin.length; i++) { 
      array.push(blobBin.charCodeAt(i)); 
     } 
     callback.call(thiz, new Blob([new Uint8Array(array)], {type: 'image/jpeg'})); 
     } 
     img.src = URL.createObjectURL(file); 
    } 
    // If we don't have all the features just return the same file given to us 
    else { 
     console.log('NOPE') 
     callback.call(this, file); 
    } 
    } 

Answer 1

我解決此問題得到了通過不使用createObjectURL，而不是像這樣使用FileReader：

flattenImage: function(file, callback){ 
    // Safari uses webkitURL 
    var URL = window.URL || window.webkitURL; 
    var canPreformat = !!(window.FileReader && window.Blob && window.Uint8Array); 

    // If we have all features we need to preformat on the client and the image 
    // isn't already flattened (jpeg), DO IT 
    if (canPreformat && !file.type.test(/jpe?g/i)) { 
     console.log('CONVERT'); 
     var thiz = this; 
     var c = document.createElement('canvas'); 
     var ctx = c.getContext('2d'); 

     var reader = new FileReader(); 
     var img = new Image; 

     // Once the image is loaded from FileReader set the src of the image to 
     // the base64'd result. This will trigger the img.onload 
     reader.onload = function (ev) { 
     img.src = ev.target.result; 
     }; 

     // Makes a blob URL from the file given. 
     img.onload = function() { 
     console.log('LOADED'); 
     c.width = this.width; 
     c.height = this.height; 

     // Take the img that was added and copy it to the canvas 
     ctx.drawImage(img, 0, 0); 

     // Put the image on top of everything else 
     ctx.globalCompositeOperation = 'destination-atop'; 

     // Any transparency should become white (instead of the default black) 
     ctx.fillStyle = "#fff"; 
     ctx.fillRect(0, 0, this.width, this.height); 

     // Save canvas as a base64'd jpeg 
     var dataURL = c.toDataURL("image/jpeg"); 

     // The following blob lines take the base64 encoded image and then 
     // convert it to a jpeg "file". This allows us to do a real file 
     // upload rather than needing to send a base64 string. 
     var blobBin = atob(dataURL.split(',')[1]); 
     var array = []; 
     for(var i = 0; i < blobBin.length; i++) { 
      array.push(blobBin.charCodeAt(i)); 
     } 
     callback.call(thiz, new Blob([new Uint8Array(array)], {type: 'image/jpeg'})); 
     } 
     reader.readAsDataURL(file); 
    } 
    // If we don't have all the features just return the same file given to us 
    else { 
     callback.call(this, file); 
    } 
    }