Question

27

Converting data URI to image data

rated 0 times [ 33] [ 6] / answers: 1 / hits: 64271 / 11 Years ago, thu, july 11, 2013, 12:00:00

/**

 * 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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradenc

Add To Favorites

Follow

Total Points: 75

Total Questions: 96

Total Answers: 129

Location: Burundi

Member since Thu, Feb 10, 2022

2 Years ago

answered 11 Years ago jarettajb · Accepted Answer

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

});