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

0

2 Answers 2

29

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

9
  • How do i use the imageData from the handler ? Aug 2, 2016 at 17:28
  • 1
    @RudreshAjgaonkar What do you want to do with it?
    – Oriol
    Aug 2, 2016 at 17:44
  • I need to send the image to Server using websocket. I was trying to use the following example. [gist.github.com/iandanforth/0ed987bfddf8205b8a23] Aug 2, 2016 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; }} Aug 2, 2016 at 17:53
  • @RudreshAjgaonkar As far as I know, websocket can only send strings.
    – Oriol
    Aug 2, 2016 at 18:03
6
var img = new Image;
img.src = strDataURI;

try this hope u will understand ..

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.