Konwersja danych URI na dane obrazu

Question

/** 
    * Converts data URI in 'image/png' format to an image data object 
    * @param dataURL Base64 encoded string 
    * @returns {ImageData/undefined} 
    */ 
    convertDataURLToImageData: function (dataURL) { 
     if (dataURL !== undefined && dataURL !== null) { 
      var canvas, context, image, imageData; 
      canvas = document.createElement('canvas'); 
      canvas.width = 470; 
      canvas.height = 470; 
      context = canvas.getContext('2d'); 
      image = new Image(); 

      image.addEventListener('load', function(){ 
       context.drawImage(image, 0, 0, canvas.width, canvas.height); 
       imageData = context.getImageData(0, 0, canvas.width, canvas.height); 
       //how do i return this? 
      }, false); 
      image.src = dataURL; 

      return imageData; 
     } 
    } 

biorąc pod uwagę powyższy fragment, jeśli chciałbym uzyskać tablicę danych obrazu z adresu URL danych, który narysowałem na płótnie, w jaki sposób mogę zwrócić dane obrazu?

Answer 1

Problemem jest to, że funkcja ta jest asynchroniczny, ponieważ czekają na imprezy load.

Następnie można użyć obietnice:

function convertURIToImageData(URI) { 
 
    return new Promise(function(resolve, reject) { 
 
    if (URI == null) return reject(); 
 
    var canvas = document.createElement('canvas'), 
 
     context = canvas.getContext('2d'), 
 
     image = new Image(); 
 
    image.addEventListener('load', function() { 
 
     canvas.width = image.width; 
 
     canvas.height = image.height; 
 
     context.drawImage(image, 0, 0, canvas.width, canvas.height); 
 
     resolve(context.getImageData(0, 0, canvas.width, canvas.height)); 
 
    }, false); 
 
    image.src = URI; 
 
    }); 
 
} 
 
var URI = "data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAABMLAAATCwAAAAAAAAAAAABsiqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/iKC3/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/2uLp///////R2uP/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/////////////////+3w9P+IoLf/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv///////////+3w9P+tvc3/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH////////////0+Pv/erDR/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB//////////////////////96sNH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf////////////////+Ft9T/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/E4zV/xOM1f8TjNX/E4zV/yKT2P/T6ff/////////////////4fH6/z+i3f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f+m1O/////////////////////////////w+Pz/IpPY/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX////////////T6ff/Tqng/6bU7////////////3u/5/8TjNX/E4zV/xOM1f8TjNX/AIv//wCL//8Ai///AIv/////////////gMX//wCL//8gmv////////////+Axf//AIv//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL///v+P///////+/4//+Axf//z+n/////////////YLf//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL//8Ai///gMX/////////////////////////////z+n//wCL//8Ai///AIv//wCL//8Ai///AHr//wB6//8Aev//AHr//wB6//+Avf//7/f/////////////v97//xCC//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="; 
 
convertURIToImageData(URI).then(function(imageData) { 
 
    // Here you can use imageData 
 
    console.log(imageData); 
 
});

Answer 2

var img = new Image; 
img.src = strDataURI; 

spróbować tej nadziei u zrozumie ..