Safari image pasting may be supported
Closed this issue · 7 comments
Hello,
I have found out, that Safari supports pasted images.
The idea is, Safari reuses same way like you have for FireFox, but unlike FireFox you do not need to postpone image pasting. Pasted images are reported as plain base64 encoded pngs that can be read out + Safari reports the clipboardData.types "image/*****"
Here you can check the basic approach (paste image in Safari into ugly area, I did not make support of it in textarea)
https://fiddle.jshell.net/juwagn/gdar957u/embedded/result/
hi, @virtman nice try, but the reported url ( e.g. webkit-fake-url://e05ae10e-96ae-42d0-a41a-ee03e7c35738/image.tiff ) is not the base64 encoded data, but a id referred to internal store of safari, which is not accessable by javascript. no way we can get the image out of this.
Hello,
did you check my code on Safari?
Please check it, I know, what you mean, and the code can extract image, I do not read it out like FireFox does, by FireFox we have to postpone pasting and read it out from div with contenteditable, but by Safari you can not read it out from div, but you can read base64 encoded png from clipboard directly.
Here is the snippet with explanation, read the comments, hope, you get enlightment.
///////////////////////
} else { //FireFox and Safari Mac
if(clipboardData.types) {
var strO = false, isImage = false;
var low;
if(clipboardData.types.length > 0) { //text
for(var i = 0; i < clipboardData.types.length; i++) {
if(clipboardData.types[i]) {
low = clipboardData.types[i].toLowerCase();
if(low.indexOf("text/") === 0) { //Safari Mac and FireFox PC handle this correctly
strO = clipboardData.getData('Text');
} else if(low.indexOf("image/") === 0) { //Safari Image workaround
strO = clipboardData.getData('Text'); //here we read the image directly from clipboard as it seems, Safari stores it already png encoded directly in clipboard
isImage = true;
}
}
}
}
if(strO) {
if(ev.preventDefault) { ev.preventDefault(); }
if(!isImage) {
textProcess(el, strO, "FireFox/Safari");
} else {
imageProcess(strO); //by Safari Mac we can handle image directly since extracted from clipboard.
}
} else { //by FireFox we have to postpone the image extraction from div with contenteditable
TEX_TIME[0] = function() {
TEX_TIME[0] = void 0;
checkImages(el);
};
}
}
}
PS: checked on Safari Mac OS X 10.11 (El Capitan)
PPS: as image source I copied via contextmenu some image from safari.
Hi, @virtman thanks for pointing out, but I tried your method and get an empty string (by clipboardData.getData('Text')). Here are my screenshots, so please tell me how you get the image data (since I am running the same platform as yours, latest Safari on El Capitan 10.11.2 ). I have also put my test code into debug branch. I would be nice if you can point the way out on the code.
Hi, @virtman , just a second after I posted those screenshots I found out that if you directly open the page from Finder ( open it in a file:///Users/xxx/xxx.html url ). You will actually get the image data, paste.js will actually work, maybe the browser considered local filesystem as the same domain as the pasted data. Is that the situation you are actually encountering? If it is, sadly this won't work for any online webpages.
Hello,
well, it seems, only when I copy image from Safari self (as image and not as text) and the source of this image is base64 data:png... (not just link) than it appears in clipboard as text that can be reused.
Also I was to early happy, seems to be only partially supported limited to Safari self as image source.
When copy from other sources I do not get it too.
It seems Safari developers dislike images from other sources, that is even more evident when trying get around webkit-fake-url.
You can very well handle such image, draw it to canvas, copy such image from canvas to canvas, but as soon you want to get raw data from canvas "infected" by such image via toDataURL or getImageData, you get security message thrown..
Yes, but tainted canvas cannot be exported is not Safari specific. When you draw an image from other domain (using new Image();..). You also get this error. webkit-fake-url is also "an image from other domain", hence not accessable by javascript.