chrome.browserAction.setIcon - Downloaded image

Question

I want to make a Chrome addon, which displays ones Facebook picture. Mine e.g. is this one.

I do get the final Url and the response of an XMLHttpRequest.

In response.response I have the image data, which starts with ��JFIF��Photoshop 3.08BIM�gO87swNzt0qHGr_stQXIz(bFBMD01000aa00100001d020000b6020000ec02000027030

I am trying to store and than display it. (I want to display this bigger on a different place as well). So I do not want to use path in chrome.browserAction.setIcon, but the Image itself.

I tried a lot of things (and will continue tomorrow). So far:

I need an ImageData Object
I need an ImageData Object smaller than <= 19 pixels.
I do know the size of the image from facebook (50x50)

Tomorrow I will continue with trying this. I forgot, that the Image is not base64 encoded yet, so the solution linked in this sentence was not able to work...

My problem is: How to create the ImageData-Object(s) required by chrome.browserAction.setIcon frim the icon above in JS. Using the "html5-canvas" tag, as ImageData is very close to a canvas.

As always, answers are highly appreciated.

Yours,

Florian

Perhaps using the constructor. https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData — Daniel Herr, Jan 05 '16 at 20:26

score 1 · Accepted Answer · answered Jan 06 '16 at 02:15

facebook graph API does send the proper Access-Control-Allow-Origin "*" in the header of the image's response.

So all you need is to set the crossorigin attribute of an <img> tag to 'anonymous', draw this image onto a canvas and use either the imageData you get from ctx.getImageData() or the dataURI you get from canvas.toDataURL().

var c = document.createElement('canvas');
var ctx = c.getContext('2d')
var img = new Image();
img.crossOrigin = 'anonymous';

img.onload = function(){
  c.width = this.width;
  c.height = this.height;
  ctx.drawImage(this, 0,0);
  // either you do use the image data
  var imagedata = ctx.getImageData(0,0,c.width, c.height);
  snippet.log('imagedata length : '+imagedata.data.length);
  // or the dataURL
  var dataURL = c.toDataURL();
  snippet.log(dataURL);
  document.body.style.backgroundImage = 'url('+dataURL+')';
  }

img.src = "https://graph.facebook.com/100004288501341/picture?type=square"

p{background-color: rgba(230, 230, 250,.7);}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

chrome.browserAction.setIcon - Downloaded image

1 Answers1