javascript - chrome.browserAction.setIcon - 下载的图像

Question

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

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

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

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

我尝试了很多事情(明天将继续)。到目前为止:

• 我需要一个 ImageData 对象
• 我需要一个小于 <= 19 像素的 ImageData 对象。
• 我确实知道 Facebook 上图片的尺寸 (50x50)

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

我的问题是:如何在 JS 中创建 chrome.browserAction.setIcon 所需的 ImageData-Object(s) 来满足上面的图标。使用“html5-canvas”标签，因为 ImageData 非常接近 Canvas 。

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

你的，

弗洛里安

Answer 1

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

因此您只需设置 crossorigin <img> 的属性标记为'anonymous' ，将此图像绘制到 Canvas 上并使用从 ctx.getImageData() 获得的 imageData或从 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>