javascript - 构建一个 chrome 扩展以上传图像(从剪贴板)

Question

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

1. make screenshot of something
2. edit screenshot in Paint
3. save unnamend.png to harddrive
4. upload unnamed.png to imageshack.us/pic-upload.de or any other website
5. share link of image with others.

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

Answer 1

为了回答你的问题，我会给你一些提示和资源来做你想做的事:

1 - 使用 Chrome Extensions API 的屏幕截图

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

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

2 - 使用 HTML5 编辑屏幕截图

好吧，这是一个棘手的问题，为什么要使用画图，而您可以使用 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，则需要使其跨平台并为每个浏览器开发插件。