构建一个 chrome 扩展以上传图像（从剪贴板）

Question

我想编写一个简单的 chrome 扩展，以替代我在大学时必须经常执行的以下步骤序列：

1. 截取某些内容
2. 在“画图”中编辑屏幕截图
3. 将 unnamend.png 保存到硬盘
4. 上传 unnamed.png 到 imageshack.us/pic-upload.de 或任何 其他网站
5. 与他人分享图片链接。

我不在乎使用哪个图像上传服务，我只是想自动化这个用例以节省时间（我已经红了，做了一个入门 chrome 扩展并检查了他们的 API，但就是这样，这个页面： http: //farter.users.sourceforge.net/blog/2010/11/20/accessing-operating-system-clipboard-in-chromium-chrome-extensions/ 似乎很有用，但我无法让它覆盖我的系统剪贴板 - 而且我找不到进一步帮助我的教程）。

Answer 1

为了回答您的问题，我将为您提供一些提示和资源来完成您想要的操作：

1 - 使用 Chrome 扩展 API 的屏幕截图

您可以使用 chrome.tabs.captureVisibleTab 来截屏您所看到的内容。

chrome.tabs.captureVisibleTab(null, {format:'png'}, function(dataURL) {
  // Your image is in the dataURL
});

2 - 使用 HTML5 编辑屏幕截图

好吧，这是一个棘手的问题，为什么你想使用 Paint，而你可以使用 HTML5 或 Web 服务？如果您想使用绘图，那么唯一的方法就是通过 NPAPI (C++ ）。确实不鼓励在本机公开某些内容，因为它会给用户带来额外的安全风险。而且提交时需要人工审核，安装时会出现致命警告。

为什么不能使用HTML5 Canvas修改截图？或者甚至，使用 Picnik 在线照片编辑 http://www.picnik.com/

var image_buffer = document.createElement('img');
image_buffer.src = dataURL; // From #1 capture tab
image_buffer.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image_buffer, 0, 0);

  // Draw something extra ontop of it such as a circle.
  ctx.beginPath();
  ctx.arc(0, 0, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

  // Convert that back to a dataURL
  var dataURL = canvas.toDataURL('image/png');

  // Base64 image only.
  var image64 = dataURL.replace(/data:image\/png;base64,/, '');
};

3 - 将图像保存到硬盘驱动器

这是另一个棘手的问题，现在，如果您使用像 Picnick 这样的“服务”，那么您可以使用他们的保存实用程序将其保存到您的硬盘上，否则您可以使用 HTML5 FileWriter API 目前正在开发中。

如果您确实想要使用 MSPaint 路线，那么您需要使用上面提到的 NPAPI。

但是当您使用 HTML5 时，您可以执行以下操作，但它仍处于规范的早期阶段：

var bb = new BlobBuilder();
bb.append(image64); // From #2 when done editing.
var blob = bb.getBlob(); 
location.href = createObjectURL(blob);

4 - 将图像上传到在线图像服务

您可以使用 http://imgurl.com 也可以上传，它有一个简洁的 API 可供您使用。您需要知道的只是普通的旧 JavaScript，只需发送 XHR 请求来请求服务并与其通信。

为此，只需使用他们的 API：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://api.imgur.com/2/upload.json?key=' + apikey, true); 
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.onreadystatechange = function() {
  if (this.readyState == 4) {
      var response = JSON.parse(xhr.response);
      if (response.error) {
        alert('Error: ' + response.error.message);
        return;
      }
      var image_url = response.upload.links.original;
  }
};
xhr.send(image64); // From #2 where we edit the screenshot.

5 - 与其他人共享图像链接。

与上面相同，这只是普通的旧 JavaScript，取决于服务（Facebook、Twitter、Buzz），您使用他们的 API 或其他服务已经为您共享图像。

注意：

我认为执行此扩展的最佳方法是使用 HTML5。您可以使用 XHR 与外部网站通信，使用 Canvas 编辑照片，使用 FileWriter 将其保存到磁盘。

我强烈反对使用 NPAPI 方法进行此类扩展，因为不需要它。另外，如果您使用 NPAPI，则需要使其跨平台并为每个浏览器开发插件。