chrome.browserAction.setIcon - 下载的图像答案

【问题标题】：chrome.browserAction.setIcon - Downloaded imagechrome.browserAction.setIcon - 下载的图像
【发布时间】：2016-04-09 17:11:24
【问题描述】：

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

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

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

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

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

我需要一个ImageData 对象
我需要一个小于 ImageData 对象。
我知道来自 facebook 的图片大小 (50x50)

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

我的问题是：如何在 JS 中创建chrome.browserAction.setIcon 所需的ImageData-Object(s)。使用“html5-canvas”标签，因为 ImageData 非常接近画布。

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

你的，

弗洛里安

【问题讨论】：

也许使用构造函数。 developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData

标签： javascript google-chrome-extension html5-canvas

【解决方案1】：

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

因此，您只需将<img> 标记的crossorigin 属性设置为'anonymous'，将此图像绘制到画布上并使用从ctx.getImageData() 获得的imageData 或从@ 获得的dataURI 987654326@.

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>

【讨论】：