23
/**
 * 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;
     }
}

considering the snippet above, if I would like to get an array of image data from a data URL I wold draw it on a canvas , how do I return the image data?

johnny 5
  • 19,893
  • 50
  • 121
  • 195
Ryne Cheow
  • 667
  • 2
  • 8
  • 13

2 Answers2

27

The problem is that your function is asynchronous, because you are waiting for the load event.

Then, you could use promises:

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);
});
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • How do i use the imageData from the handler ? – Rudresh Ajgaonkar Aug 02 '16 at 17:28
  • 1
    @RudreshAjgaonkar What do you want to do with it? – Oriol Aug 02 '16 at 17:44
  • I need to send the image to Server using websocket. I was trying to use the following example. [https://gist.github.com/iandanforth/0ed987bfddf8205b8a23] – Rudresh Ajgaonkar Aug 02 '16 at 17:51
  • function convertDataURLToImageData(dataURL, callback) { if (dataURL !== undefined && dataURL !== null) { var canvas, context, image;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); `var image_trail = canvas.toDataURL('image/png').slice(22); ws.send(image_trail);`callback(context.getImageData(0, 0, canvas.width, canvas.height)); }, false); image.src = dataURL; }} – Rudresh Ajgaonkar Aug 02 '16 at 17:53
  • @RudreshAjgaonkar As far as I know, websocket can only send strings. – Oriol Aug 02 '16 at 18:03
  • So I should sent the data URI right? I am new to web domain. so please excuse me sir if i am asking naive question – Rudresh Ajgaonkar Aug 02 '16 at 18:04
  • @RudreshAjgaonkar I don't know much about websockets, better ask that in a new question. – Oriol Aug 02 '16 at 18:26
  • CAn you give me an example how you have used the imageData? – Rudresh Ajgaonkar Aug 02 '16 at 18:37
  • @RudreshAjgaonkar I used `console.log` to display the imageData in the console. – Oriol Aug 17 '16 at 17:13
6
var img = new Image;
img.src = strDataURI;

try this hope u will understand ..

Umesh Panchani
  • 420
  • 3
  • 13
  • duplicate question --http://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas – Umesh Panchani Jul 11 '13 at 10:44
  • 5
    But I think that the asker wants an `ImageData` object (http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/Overview.html#imagedata), not an `HTMLImageElement` – Oriol Jul 11 '13 at 10:51
  • @Oriol Yeah I am looking for an ImageData object ;) – Ryne Cheow Jul 11 '13 at 11:03