Firefox에서 createObjectURL img.src로 onload가 실행되지 않습니다.

Question

다음 코드가 있습니다. 그것은 정상적으로, 크롬에서 예상대로 작동합니다. 그러나 Firefox에서는 "CONVERT"를 기록하지만 결코 "LOADED"를 기록하지 않습니다. JS 오류 또는 아무것도. 온로드는 발사되지 않습니다. 나는 구글이나 stackoverflow에 많이 찾을 수없는 것 같습니다. 많은 사람들이 온로드 캐시 된 이미지를 발생하지 않습니다 말하지만,이 캐시해서는 안 그들은하더라도, 내가 그들을 체포 캐시 할 수 wouldnt한다 (오른쪽?) 내가하지 않음으로써이 문제를 해결 가지고

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); 
    } 
    }