chrome.browserAction.setIcon - 下载的图片

Question

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

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

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

开头

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

我尝试了很多东西（明天继续）。到目前为止：

我需要一个 ImageData 对象
我需要一个 ImageData 小于 <= 19 像素的对象。
我知道 facebook 图片的大小 (50x50)

明天我会继续努力this。我忘记了，图片还不是 base64 编码的，所以这句话中链接的解决方案无法工作...

我的问题是：如何在 JS 中从上面的图标创建 chrome.browserAction.setIcon 所需的 ImageData-对象。使用 "html5-canvas" 标签，因为 ImageData 非常接近 canvas.

一如既往，非常感谢您的回答。

你的，

弗洛里安

Answer 1

facebook 图 API 确实在图像响应的 header 中发送了正确的 Access-Control-Allow-Origin "*"。

因此，您只需将 <img> 标记的 crossorigin 属性设置为 'anonymous'，将此图像绘制到 canvas 上，然后使用您的图像数据从 ctx.getImageData() 获取或从 canvas.toDataURL().

获取的 dataURI

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 - 下载的图片

chrome.browserAction.setIcon - Downloaded image

javascript

google-chrome-extension

html5-canvas