Is there any way to copy image to clipboard with pure javascript without libraries? - Stack Overflow

I've tried using document.execCommand('copy') like this site but it didn't work (nothing got copied to my clipboard despite the fact that the console.log said it was successful). I also used the navigator.clipboard API but that didn't work for my jpg images, and here is its code:

navigator.clipboard.write(
[
    new ClipboardItem({
        'image/jpeg': new Blob( ['media/anime_0.jpg'],{type:'image/jpeg'} )
    })
])
.then(e=>{console.log('Copied to clipboard')})
.catch(e=>{console.log(e)})

The above code produces the following error:

DOMException: Sanitized MIME type image/jpeg not supported on write.

Anyone know if I'm doing anything wrong or if it's even possible to copy images to clipboard without using external libraries?

I've tried using document.execCommand('copy') like this site but it didn't work (nothing got copied to my clipboard despite the fact that the console.log said it was successful). I also used the navigator.clipboard API but that didn't work for my jpg images, and here is its code:

navigator.clipboard.write(
[
    new ClipboardItem({
        'image/jpeg': new Blob( ['media/anime_0.jpg'],{type:'image/jpeg'} )
    })
])
.then(e=>{console.log('Copied to clipboard')})
.catch(e=>{console.log(e)})

The above code produces the following error:

DOMException: Sanitized MIME type image/jpeg not supported on write.

Anyone know if I'm doing anything wrong or if it's even possible to copy images to clipboard without using external libraries?

• javascript
• image
• blob
• clipboard

Share Improve this question Follow edited Jul 15, 2020 at 7:25 user8380672 asked Jul 15, 2020 at 7:21 user8380672user8380672 72011 gold badge1212 silver badges2323 bronze badges 3

• Pretty sure the Blob should actually have the raw image data - potentially as loaded in via Fetch API - and not just a URL. – Niet the Dark Absol Commented Jul 15, 2020 at 7:24
• Could you specify what you mean by "raw image data"? Would base64 / Uint8array forms of an image be considered raw image data? – user8380672 Commented Jul 15, 2020 at 7:30
• 1 Image to blob -> stackoverflow./questions/42471755/… – Keith Commented Jul 15, 2020 at 7:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Thanks Keith for the link to: convert image into blob using javascript

This is the solution I used for my app (it will only save images as png, as jpeg/jpg files keep giving me the DOMException error.

const img = new Image
const c = document.createElement('canvas')
const ctx = c.getContext('2d')

function setCanvasImage(path,func){
    img.onload = function(){
        c.width = this.naturalWidth
        c.height = this.naturalHeight
        ctx.drawImage(this,0,0)
        c.toBlob(blob=>{
            func(blob)
        },'image/png')
    }
    img.src = path
}

setCanvasImage('media/anime_0.jpg',(imgBlob)=>{
    console.log('doing it!')
    navigator.clipboard.write(
        [
            new ClipboardItem({'image/png': imgBlob})
        ]
    )
    .then(e=>{console.log('Image copied to clipboard')})
    .catch(e=>{console.log(e)})
})

I know the above answer has been accepted, but nonetheless, this is my version in Vue 3 SFC using ant design

<template>
  <Card title="Copy Image" size="small" class="my-card">
    <img :src="imageSrc" alt="Non Coi Male" />
    <Button size="small" type="dashed" @click="copyImageToClipboard(imageSrc)"
    >Copy</Button>
  </Card>
</template>
<script setup lang="ts">
import { Card, message, Button } from 'ant-design-vue';

const imageSrc = 'https://some-image-url/mockimage.jpeg';

const copyImageToClipboard= async (src: string) => {
  const covertedPngImage = new Image();
  covertedPngImage.src = src;
  covertedPngImage.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = covertedPngImage.width;
    canvas.height = covertedPngImage.height;
    ctx?.drawImage(covertedPngImage, 0, 0);
    canvas.toBlob((blob) => {
      if (blob) {
        const item = new ClipboardItem({ 'image/png': blob });
        navigator.clipboard.write([item]);
        message.success('Copied image to clipboard');
      } else {
        message.error('Failed to copy image to clipboard');
      }
    })
  }
}
</script>