CODEWITHSUNDEEP
javascriptimageblobclipboard
user8380672
user8380672

Reputation: 710

Is there any way to copy image to clipboard with pure javascript without 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?

Upvotes: 3

Views: 4816

Answers (2)

A Donglaotian
A Donglaotian

Reputation: 1

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>

Upvotes: 0

user8380672
user8380672

Reputation: 710

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)})
})

Upvotes: 7

Related Questions