Question

我想制作一个Chrome插件，显示Facebook图片。我的是this one。

我确实得到了最终的Url和XMLHttpRequest的响应。

在response.response我有图像数据，以��JFIF��Photoshop 3.08BIM�gO87swNzt0qHGr_stQXIz(bFBMD01000aa00100001d020000b6020000ec02000027030

开头

我正在尝试存储而不是显示它。（我想在不同的地方展示更大的内容）。所以我不想在path中使用chrome.browserAction.setIcon，而是使用图片本身。

我尝试了很多事情（并将在明天继续）。到目前为止：

我需要一个ImageData对象
我需要一个小于＆lt; = 19像素的ImageData对象。
我知道facebook（50x50）

明天我会继续尝试this。我忘记了，Image还没有base64编码，所以这句话中链接的解决方案无法正常工作......

我的问题是：如何创建ImageData - {j}上面图标所需的对象。使用“html5-canvas”标签，因为ImageData非常接近画布。

一如既往，高度赞赏答案。

此致，

弗洛里安

Answer 1

脸谱图API会在图片的回复标题中发送正确的Access-Control-Allow-Origin "*"。

所以您只需要将crossorigin标记的<img>属性设置为'anonymous'，将此图像绘制到画布上并使用您从{{1}获得的imageData或者您从ctx.getImageData()获得的dataURI。

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

chrome.browserAction.setIcon - 已下载的图片

1 个答案: