StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>To answer your questions, I will give you some hints and resources to do what you want:</p> <h2>1 - Screenshot using Chrome Extensions API</h2> <p>You can use <a href="https://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab" rel="nofollow">chrome.tabs.captureVisibleTab</a> to screenshot what you see.</p> <pre><code>chrome.tabs.captureVisibleTab(null, {format:'png'}, function(dataURL) { // Your image is in the dataURL }); </code></pre> <h2>2 - Edit Screenshot using HTML5</h2> <p>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 <a href="https://developer.chrome.com/extensions/npapi.html" rel="nofollow">NPAPI</a> (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.</p> <p>Why can't you use HTML5 Canvas to modify the screenshot? Or even, use Picnik online photo editing <a href="http://www.picnik.com/" rel="nofollow">http://www.picnik.com/</a></p> <pre><code>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,/, ''); }; </code></pre> <h2>3 - Save Image to Hard drive</h2> <p>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 <a href="http://www.w3.org/TR/file-writer-api/" rel="nofollow">HTML5 FileWriter API</a> which is currently being developed. </p> <p>If you really want to with your MSPaint route, then you would need to use NPAPI as mentioned above.</p> <p>But when you use HTML5, you can do the following, but it is still early in spec:</p> <pre><code>var bb = new BlobBuilder(); bb.append(image64); // From #2 when done editing. var blob = bb.getBlob(); location.href = createObjectURL(blob); </code></pre> <h2>4 - Upload image to an Online Image Service</h2> <p>You can use <a href="http://imgurl.com" rel="nofollow">http://imgurl.com</a> 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.</p> <p>To do that, just use their API:</p> <pre><code>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. </code></pre> <h2>5 - Share link of image with others.</h2> <p>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.</p> <p><strong>Note:</strong></p> <p>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. </p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload