CODEWITHSUNDEEP
javascriptjqueryimagebase64clipboarddata
Muhammad Ramzan
Muhammad Ramzan

Reputation: 352

Javascript Clipboard SetData Error in Mozilla

I want to copy image programmatically. I have used executeCommand('copy')which was not working so I override copy listener by document.addEventListener('copy', modifyCopy); In modifyCopy function I convert base64 encoded string to blob url and set it into clipBoard by e.clipboardData.setData('image/png',blobUrl); In chrome it does not work but in Mozilla which after setting data when I go to paint it enable paint paste but gives following error.

you can check fiddle for what I have tried. http://jsfiddle.net/32mbd1o0/16/

enter image description here

function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  var slice = byteCharacters.slice(offset, offset + sliceSize);

  var byteNumbers = new Array(slice.length);
  for (var i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
 }

 var byteArray = new Uint8Array(byteNumbers);

  byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
 return blob;
}

const modifyCopy = e => {
                var contentType = 'image/png';
                var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
                var blob = b64toBlob(b64Data, contentType);
                var blobUrl = URL.createObjectURL(blob);
alert(blobUrl);
                e.clipboardData.setData('image/png',blobUrl);
                e.preventDefault();
            };

document.addEventListener('copy', modifyCopy);

 $(".copyable").click(function (e) {
                $(this).attr("contenteditable", true);
                document.execCommand('copy');
            });

Upvotes: 4

Views: 1330

Answers (2)

AmerllicA
AmerllicA

Reputation: 32522

Extremely sorry, but is impossible for JavaScript language do like you want to do it, se below code in C#:

// Copy the selected area to the clipboard.
private void CopyToClipboard(Rectangle src_rect)
{
    // Make a bitmap for the selected area's image.
    Bitmap bm = new Bitmap(src_rect.Width, src_rect.Height);

    // Copy the selected area into the bitmap.
    using (Graphics gr = Graphics.FromImage(bm))
    {
        Rectangle dest_rect =
        new Rectangle(0, 0, src_rect.Width, src_rect.Height);
        gr.DrawImage(OriginalImage, dest_rect, src_rect, GraphicsUnit.Pixel);
    }

    // Copy the selection image to the clipboard.
    Clipboard.SetImage(bm);
}

Some of functions and APIs don't exit in JavaScript yet because of some security and policy reasons, like Clipboard.SetImage, this the image in this code with Bitmap function is created and is putted in clipboard, then applications like Paint, Microsoft Office, Adobe productions can find it out, but with JavaScript there is no API or function for do like above code.

I spend time about one hour for your answer and I had an idea, I wanted to change image to base64 and then copy in clipboard, but it was not a good idea, because it was text, pure text and other applications just see text, I know it is awful but it is.

Sometimes ago I used Windows 10 snipping tool and Linux shutter for snipping part of my desktop and send it to my friend by Telegram and I see with a simple Ctrl+V I can paste the cropped part into chat area, automatically the cropped part was copied into my clipboard, I searched about it but not like now, I deeply search about it and I find it out, there is no way to copy image in clipboard for out side of browser area.

There is just a way to copy only for browser, convert image to base64 and keep it in clipboard then just in browser put it as img tag and set the base64 text as src attribute to img tag. just it.

Sorry for bad news.

Upvotes: 0

bastos.sergio
bastos.sergio

Reputation: 6764

Firefox only supports these data types during copy and cut events Source.

  • text/plain
  • text/uri-list
  • text/csv
  • text/html
  • image/svg+xml
  • application/xml, text/xml
  • application/json

One possible workaround described here, copies the image to the clipboard as html data. This works, but only if you want to paste on programs such as Microsoft Windows Word or other word processors. Programs for working with graphics (paint, photoshop, etc) do not understand what is on the clipboard.

Finally, you can also create an extension for firefox that relies on the API clipboard.setImageData(). The clipboard.setImageData allows you to populate the clipboard with image data. This API is compatible with the Chrome apps API (it was added in Firefox 57) and it should still be considered experimental. This API requires the clipboardWrite permission.

Upvotes: 3

Related Questions