建立一个扩展名为了上传图片（从剪贴板） [英] build a chrome extension in order to upload images (from clipboard)

问题描述

$ b ol>

制作某些内容的屏幕截图

在Paint中编辑屏幕截图

将unnamend.png保存到硬盘

将unnamed.png上传到ima​​geshack.us/pic-upload.de或任何
其他网站

与其他人分享图片链接。

我不关心要使用哪种图片上传服务，我只是想将此用例自动化为节省时间（我已经是红色的，并且做了一个入门的Chrome扩展并检出了他们的API，但就是这样，这个页面： http://farter.users.sourceforge.net/blog/2010/11/20/accessing-operating-system -clipboard式 - 铬 - 铬 - 扩展/ 似乎很有用，但我无法覆盖我的系统剪贴板 - 而且我找不到帮助我的教程）。

解决方案

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

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

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

  chrome.tabs.captureVisibleTab（null，{format：'png'}，function（dataURL）{
 //你的图像位于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; //从＃1捕获选项卡
 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）; 
 
 //绘制一些额外的东西，比如一个圆。 
 ctx.beginPath（）; 
 ctx.arc（0，0，10，0，Math.PI * 2，true）; 
 ctx.closePath（）; 
 ctx.fill（）; 
 
 //将其转换为dataURL 
 var dataURL = canvas.toDataURL（'image / png'）; 
 
 //仅Base64图片。 
 var image64 = dataURL.replace（/ data：image\ / png; base64，/，''）; 
}; 
  

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

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

如果您真的想要使用您的MSPaint路线，那么您需要使用上述的NPAPI。

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

  var bb = new BlobBuilder （）; 
 bb.append（image64）; //完成编辑后从＃2​​开始。 
 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）; //从＃2开始编辑截图。 
  

5 - 与他人分享图片链接。

同上，这只是简单的旧javascript，取决于服务（Facebook，Twitter，Buzz），你使用他们的API或其他服务已经为你分享图像。

注意：

我会说做这个扩展的最好方法是使用HTML5。您可以使用XHR与外部网站进行通信，Canvas编辑照片，FileWriter将其保存到磁盘。

由于不需要这样的扩展，因此我会高度不鼓励NPAPI方法进行扩展。另外，如果你通过NPAPI，你需要使它跨平台并为每个浏览器开发插件。

I wanted to write a simple chrome extension in order to substitute the following sequence of steps which i have to do very often for university:

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.

I don't care which image upload service to use, i just want automize this use-case in order to save time (I already red and did a getting-started chrome extension and checked out their API, but that's it, this page: http://farter.users.sourceforge.net/blog/2010/11/20/accessing-operating-system-clipboard-in-chromium-chrome-extensions/ seemed useful, but i couldn't make it overwrite my systems clipboard - moreover i can't find a tutorial which helps me further).

解决方案

To answer your questions, I will give you some hints and resources to do what you want:

1 - Screenshot using Chrome Extensions API

You can use chrome.tabs.captureVisibleTab to screenshot what you see.

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

2 - Edit Screenshot using HTML5

Well, here is a tricky one, why do you want to use Paint while you can use HTML5 or a web service? If you want to use paint, then the only way doing this is natively through NPAPI (C++). Exposing something natively is really discouraged since it poses additional security risks to users. And it requires manual review for submission and a deadly warning when installing.

Why can't you use HTML5 Canvas to modify the screenshot? Or even, use Picnik online photo editing 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 - Save Image to Hard drive

This is another tricky one, right now, if you use a "service" like Picnick, then you can use their saving utility to save to your harddrive, otherwise you can use HTML5 FileWriter API which is currently being developed.

If you really want to with your MSPaint route, then you would need to use NPAPI as mentioned above.

But when you use HTML5, you can do the following, but it is still early in spec:

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

4 - Upload image to an Online Image Service

You can use http://imgurl.com to upload too, it has a neat API that you can use. All you need to know is plain old javascript, just send an XHR request to request the service and communicate with it.

To do that, just use their 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 - Share link of image with others.

Same as above, this is just plain old javascript, depends on the service (Facebook, Twitter, Buzz), you use their API or another service does that already for you to share the images.

Note:

I would say the best way to do this extension is using HTML5. You can use XHR to communicate to external websites, Canvas to edit the photos, and FileWriter to persist that to disk.

I would highly discourage the NPAPI approach for such extension since it isn't needed. Plus, if you go through NPAPI, you would need to make it cross platform and develop plugins for each browser.

这篇关于建立一个扩展名为了上传图片（从剪贴板）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！