I search in goggle and didn't find any answer.
The new clipboard API support copy image to clipboard by using document.exec command.
If yes, How can I copy image data url to clipboard as image?
I am the developer of Webpage Screenshot extension and I search for a way to copy the image to clipboard.
I also search for a way to open the image with specific software.
I am developing a ScreenShotShare chrome extension, I have the need to copy clipped image to clipboard as well. And I found the solution works for me.
1. Add "clipboardWrite","clipboardRead" to the permissions in manifest.json file
2. do copy work in the background.html with background.js
3. add to background.html
4. I implement the "copyImageToClipboard" to function in background.js
copyImageToClipboard: function () {
var img = $('clipboard-img');
img.src = localStorage[this.screenshotURIName]; // I store the image URI in localStorage
var div = $('clipboard-div');
div.contentEditable = true;
var range;
if (document.createRange) {
range = document.createRange();
range.selectNodeContents(div);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
div.focus();
document.execCommand('copy');
}
div.contentEditable = false;
}
clipboardData API is almost implemented in all the browser, so instead docuemnt.exec command, you can try below also refer the below link which has similar use case as yours.
https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
clipboardData.setData('text/plain', selection.getText());
clipboardData.setData('application/officeObj', selection.serialize());
clipboardData.setData('image/bmp', draw(selection));
clipboardData.setData('text/html', ...);
Today 7 years later, it's the most starred issue in Google Chrome. To copy images using JavaScript. And now it's possible!
Chrome 76 Beta supports it: https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html
You can read the full draft here:
https://www.chromestatus.com/feature/5074658793619456
and here: https://w3c.github.io/clipboard-apis/#async-clipboard-api
Example:
var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});
const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
await navigator.clipboard.write([clipboardItemInput]);
You can test it here: http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html
(Now it support only Chrome 76 beta)
Related
This question already has answers here:
How to create a file in memory for user to download, but not through server?
(22 answers)
Closed 2 years ago.
I have data that I want to write to a file, and open a file dialog for the user to choose where to save the file. It would be great if it worked in all browsers, but it has to work in Chrome. I want to do this all client-side.
Basically I want to know what to put in this function:
saveFile: function(data)
{
}
Where the function takes in data, has the user select a location to save the file, and creates a file in that location with that data.
Using HTML is fine too, if that helps.
A very minor improvement of the code by Awesomeness01 (no need for anchor tag) with addition as suggested by trueimage (support for IE):
// Function to download data to a file
function download(data, filename, type) {
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
Tested to be working properly in Chrome, FireFox and IE10.
In Safari, the data gets opened in a new tab and one would have to manually save this file.
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
click here to download your file
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>
And you would then download the file by putting the download attribute on the anchor tag.
The reason I like this better than creating a data url is that you don't have to make a big long url, you can just generate a temporary url.
This project on github looks promising:
https://github.com/eligrey/FileSaver.js
FileSaver.js implements the W3C saveAs() FileSaver interface in
browsers that do not natively support it.
Also have a look at the demo here:
http://eligrey.com/demos/FileSaver.js/
Choosing the location to save the file before creating it is not possible. But it is possible, at least in Chrome, to generate files using just JavaScript. Here is an old example of mine of creating a CSV file. The user will be prompted to download it. This, unfortunately, does not work well in other browsers, especially IE.
<!DOCTYPE html>
<html>
<head>
<title>JS CSV</title>
</head>
<body>
<button id="b">export to CSV</button>
<script type="text/javascript">
function exportToCsv() {
var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
}
var button = document.getElementById('b');
button.addEventListener('click', exportToCsv);
</script>
</body>
</html>
For latest browser, like Chrome, you can use the File API as in this tutorial:
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
function SaveBlobAs(blob, file_name) {
if (typeof navigator.msSaveBlob == "function")
return navigator.msSaveBlob(blob, file_name);
var saver = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
var blobURL = saver.href = URL.createObjectURL(blob),
body = document.body;
saver.download = file_name;
body.appendChild(saver);
saver.dispatchEvent(new MouseEvent("click"));
body.removeChild(saver);
URL.revokeObjectURL(blobURL);
}
Tried this in the console, and it works.
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));
You cannot do this purely in Javascript. Javascript running on browsers does not have enough permission yet (there have been proposals) due to security reasons.
Instead, I would recommend using Downloadify:
A tiny javascript + Flash library that enables the creation and download of text files without server interaction.
You can see a simple demo here where you supply the content and can test out saving/cancelling/error handling functionality.
For Chrome and Firefox, I have been using a purely JavaScript method.
(My application cannot make use of a package such as Blob.js because it is served from a special engine: a DSP with a WWWeb server crammed in and little room for anything at all.)
function FileSave(sourceText, fileIdentity) {
var workElement = document.createElement("a");
if ('download' in workElement) {
workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
workElement.setAttribute("download", fileIdentity);
document.body.appendChild(workElement);
var eventMouse = document.createEvent("MouseEvents");
eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
workElement.dispatchEvent(eventMouse);
document.body.removeChild(workElement);
} else throw 'File saving not supported for this browser';
}
Notes, caveats, and weasel-words:
I have had success with this code in both Chrome and Firefox clients running in Linux (Maipo) and Windows (7 and 10) environments.
However, if sourceText is larger than a MB, Chrome sometimes (only sometimes) gets stuck in its own download without any failure indication; Firefox, so far, has not exhibited this behavior. The cause might be some blob limitation in Chrome. Frankly, I just don't know; if anybody has any ideas how to correct (or at least detect), please post. If the download anomaly occurs, when the Chrome browser is closed, it generates a diagnostic such as
This code is not compatible with Edge or Internet Explorer; I have not tried Opera or Safari.
StreamSaver is an alternative to save very large files without having to keep all data in the memory.In fact it emulates everything the server dose when saving a file but all client side with service worker.
You can either get the writer and manually write Uint8Array's to it or pipe a binary readableStream to the writable stream
There is a few example showcasing:
How to save multiple files as a zip
piping a readableStream from eg Response or blob.stream() to StreamSaver
manually writing to the writable stream as you type something
or recoding a video/audio
Here is an example in it's simplest form:
const fileStream = streamSaver.createWriteStream('filename.txt')
new Response('StreamSaver is awesome').body
.pipeTo(fileStream)
.then(success, error)
If you want to save a blob you would just convert that to a readableStream
new Response(blob).body.pipeTo(...) // response hack
blob.stream().pipeTo(...) // feature reference
Javascript has a FileSystem API. If you can deal with having the feature only work in Chrome, a good starting point would be: http://www.html5rocks.com/en/tutorials/file/filesystem/.
I am trying to save a image/screenshot through paste Ctrl+V into a div #pasteImageDiv by user. Its working fine with Chrome but not working with IE.
I am using IE10.
Until now, what I have been able to find is that if I paste any text to div #pasteImageDiv, it catch the onpaste event properly, even in IE.
But if I paste an image instead of text, it even doesn't catch onpaste (IE doesn't even enter into the function that handles the onpaste event).
document.getElementById('pasteImageDiv').onpaste = function (event) {
It is working well in Chrome whether I paste a text string or an image.
I hope you understand what kind of issue I am facing. Still, if any additional information is needed, please let me know.
$('#pasteImageHere, #pasteImageDiv').click(function(e){ //on paste image button click
e.preventDefault();
$('#hideOnPaste').hide();
//document.getElementById('pasteImageDiv').click();
document.getElementById('pasteImageDiv').style.backgroundColor = "#F1F1F1";
document.getElementById('pasteImageDiv').onpaste = function (event) {
$('#hideOnPaste').hide();
//console.log(event.clipboardData.getData('image/png'));
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
var elem = document.createElement("img");
elem.setAttribute("id", "pastedImage");
elem.setAttribute("height", "200");
elem.setAttribute("width", "300");
document.getElementById("pasteImageDiv").appendChild(elem);
document.getElementById("pastedImage").src = event.target.result;
document.getElementById('inputImageData').value = event.target.result;
console.log($('#inputImageData').val());
$('#pastedImage').css('width', '300px');
$('#pastedImage').css('height', '200px');
document.getElementById("pastedImage").style.height = '200px';
};
reader.readAsDataURL(blob);
$('#removePastedImage').show();
}
}
});
Image paste support was added in IE11:
Starting with IE11, images pasted from the clipboard are base64 encoded by default. Users can now easily and safely copy and paste images from their local file system into contenteditable regions of a website. Prior to IE11, pasting a local image on a live website (across security zones) resulted in a broken image icon, as a security measure to prevent local file access.
IE11 is the first browser that supports both pasting images directly from clipboard (for example, from photo editing software or from PrintScreen) and pasting HTML that incorporates local images (for example, from applications such as Microsoft Office that store images temporarily in local paths). Either DataURI or Blob can be used to encode these images.
References
Enhanced Rich Editing Experiences in IE11
Internet Explorer 11 Developer Guide: Editing
I have some JavaScript code as given under first code snippet, that works in latest Chrome but not in latest FireFox. This code is exporting data to xls file using Blob object. The strange thing is that in FireFox, the code does not throw any error but does nothing as it executes all the lines successfully i.e. no export happens.
A demo for this question is at this URL: http://js.do/sun21170/84920
If you run the code in above demo in Chrome, it will download the file newfile.xls ( allow popups in Chrome).
Question: What change I need to make in Blob Code given below, in order to make it work in FireFox? I tried using type: 'application/octet-stream' and also type: 'text/plain', but both did not help in FireFox.
The variable table in code snippet below holds a string that is the html for rendering a table including html and body tags.
Blob Code for exporting (not working in FireFox)
//export data in Chrome or FireFox
//this works in Chrome but not in FireFox
//also no errors in firefox
sa = true;
var myBlob = new Blob( [table] , {type:'text/html'});
var url = window.URL.createObjectURL(myBlob);
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = "newfile.xls";
a.click();
window.URL.revokeObjectURL(url);
The answer to my question is as explained below.
The problem was that the line window.URL.revokeObjectURL(url) was being called too soon for FireFox to react to a.click() and show it's file dialog. So, I just added a delay by using setTimeout for the line window.URL.revokeObjectURL(url). This change made it work in FireFox. Of course, it worked in Chrome also.
The updated code is as below which has only one change in the last line of code. Also, the demo with this change that works in FireFox is: http://js.do/sun21170/84977
Blob Code for exporting (this works in FireFox and Chrome)
//export data in Chrome or FireFox
//this works in Chrome as well as in FireFox
sa = true;
var myBlob = new Blob( [table] , {type:'text/html'});
var url = window.URL.createObjectURL(myBlob);
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = "newfile.xls";
a.click();
//adding some delay in removing the dynamically created link solved the problem in FireFox
setTimeout(function() {window.URL.revokeObjectURL(url);},0);
While the above code works perfectly, I think when exporting to xls file, it's better to use type:'application/vnd.ms-excel even though the table variable holds a html string.
This small change makes FireFox automatically use Excel as the default program for opening the exported file else FireFox uses Laucnch Windows app (default) to open the file. This default app on my laptop was Edge browser.
var myBlob = new Blob( [table] , {type:'application/vnd.ms-excel'});
If you would like to use 100% client-side approach in older IE browsers, then Blob object cannot be used since it's not available in older IE browsers, but you can use another approach as in code snippet below.
Exporting Html to Excel in IE <= IE 11 including IE 8 and IE 9
function ExportTabletoExcelInOldIE(table)
{
//table variable contains the html to be exported to Excel
var sa = null;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0) // If old Internet Explorer including IE 8
{
//make sure you have an empty div with id of iframeDiv in your page
document.getElementById('iframeDiv').innerHTML = '<iframe id="txtArea1" style="display:none"></iframe>';
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(table);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "DataExport.xls");
document.getElementById('iframeDiv').innerHTML = "";
}
return (sa);
}
For above IE specific code to work, add following to your page markup.
Empty Div needed when exporting in older IE browsers
<div id='iframeDiv'></div>
You can try to add the anchor to the dom like this:
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
I know this trouble with Blob and CSV Export. My solution: Create an Array and POST it to a backend script. Then you can simply create a Excel, CSV, PDF etc.
I'm trying to find a cross browser way to store data locally in HTML5. I have generated a chunk of data in a Blob (see MDN). Now I want to move this Blob to the actual filesystem and save it locally. I've found the following ways to achieve this;
Use the <a download> attribute. This works only in Chrome currently.
Microsoft introduces a saveAs function in IE 10 which will achieve this.
Open the Blob URL in the browser and save it that way.
None of these seems to work in Safari though. While (1) works in Chrome, (2) in IE and (3) in Firefox no one works in Safari 6. The download attribute is not yet implemented and when trying to open a blob using the URL Safari complains that URLs starting with blob: are not valid URLs.
There is a good script that encapsulates (1) and (3) called FileSaver.js but that does not work using the latest Safari version.
Is there a way to save Blobs locally in a cross browser fashion?
FileSaver.js has beed updated recently and it works on IE10, Safari5+ etc.
See: https://github.com/eligrey/FileSaver.js/#supported-browsers
The file name sucks, but this works for me in Safari 8:
window.open('data:attachment/csv;charset=utf-8,' + encodeURI(csvString));
UPDATE: No longer working in Safari 9.x
The only solution that I have come up with is making a data: url instead. For me this looks like:
window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));
Here data is the array buffer data coming from response while making http rest call in js. This works in safari, however there might me some issue in filename as it comes to be untitled.
var binary = '';
var bytes = new Uint8Array(data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
var base64 = 'data:' + contentType + ';base64,' + window.btoa(binary);
var uri = encodeURI(base64);
var anchor = document.createElement('a');
document.body.appendChild(anchor);
anchor.href = uri;
anchor.download = fileName;
anchor.click();
document.body.removeChild(anchor);
Have you read this article? http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them
Relating to http://caniuse.com/#search=blob, blobs are possible to use in safari.
You should consturct a servlet which delivers the blob via standard http:// url, so you can avoid using blob: url. Just make a request to that url and build your blob.
Afterwards you can save it in your filesystem or local storage.
The download attribute is supported since ~safari 10.1, so currently this is the way to go.
This is the only thing that worked for me on safari.
var newWindow = window.open();
const blobPDF = await renderMapPDF(); // Your async stuff goes here
if (!newWindow) throw new Error('Window could not be opened.');
newWindow.location = URL.createObjectURL(blobPDF);
I noticed a blog post from Google that mentions the ability to paste images directly from the clipboard into a Gmail message if you're using the latest version of Chrome. I tried this with my version of Chrome (12.0.742.91 beta-m) and it works great using control keys or the context menu.
From that behavior I need to assume that the latest version of webkit used in Chrome is able to deal with images in the Javascript paste event, but I have been unable to locate any references to such an enhancement. I believe ZeroClipboard binds to keypress events to trigger its flash functionality and as such wouldn't work through the context menu (also, ZeroClipboard is cross-browser and the post says this works only with Chrome).
So, how does this work and where the enhancement was made to Webkit (or Chrome) that enables the functionality?
I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReader on it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:
document.onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // might give you mime types
for (var index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
};
Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.
Edit: Note that the item is of type DataTransferItem. JSON.stringify might not work on the items list, but you should be able to get mime type when you loop over items.
The answer by Nick seems to need small changes to still work :)
// window.addEventListener('paste', ... or
document.onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
Example running code: http://jsfiddle.net/bt7BU/225/
So the changes to nicks answer were:
var items = event.clipboardData.items;
to
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
Also I had to take the second element from the pasted items (first one seems to be text/html if you copy an image from another web page into the buffer). So I changed
var blob = items[0].getAsFile();
to a loop finding the item containing the image (see above)
I didn't know how to answer directly to Nick's answer, hope it is fine here :$ :)
As far as I know -
With HTML 5 features(File Api and the related) - accessing clipboard image data is now possible with plain javascript.
This however fails to work on IE (anything less than IE 10). Don't know much about IE10 support also.
For IE the optiens that I believe are the 'fallback' options are
either using Adobe's AIR api
or
using a signed applet