JS copy picture to clipboard read clipboard

JS Copy the image to the clipboard Read the clipboard

navigator.clipboard Copy pictures

Picture writing clipboard

function handleCopyImg() {
      
const canvas = document.createElement('canvas');  
const ctx = canvas.getContext('2d');  
const img = new Image();  
canvas.width = testImg.width;  
canvas.height = testImg.height;  
img.crossOrigin = "Anonymous";  
img.src = testImg.src;    
img.onload = () => {
        
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);    
	ctx.drawImage(img, 0, 0);    //  take canvas To blob 
	canvas.toBlob(async blob => {
          
		console.log(blob);      
		const data = [        
			new ClipboardItem({
              
				[blob.type]: blob,        
			}),     
		];      // https://w3c.github.io/clipboard-apis/#dom-clipboard-write 
		await navigator.clipboard.write(data)        
		.then(          
			() => {
                
				console.log("Copied to clipboard successfully!");          
			},          
			() => {
                
				console.error("Unable to write to clipboard.");          
			}      
		);      
	});  
}}
btn.addEventListener("click", handleCopyImg, false);

read Method returns a Promise, Get the copied content

async function foo() {
     
   const items = await navigator.clipboard.read();  
    const imageBlob = await items[0].getType("image/png"); 
   console.log("imageBlob==>", imageBlob);
}
//  Read text 
async function foo() {
    
  await navigator.clipboard.readText().then((data) => {
    
    console.log(data);
  });
}

write Method , Write clipboard contents , Such as pictures or other documents

const data = [
  new ClipboardItem({
    
    "text/plain": new Blob(["hello clipboard"], {
     type: "text/plain" })
  })
];
navigator.clipboard.write(data).then(
  () => {
    
    console.log("Copied to clipboard successfully!");
  },
  () => {
    
    console.error("Unable to write to clipboard. :-(");
  }
);
// writeText Method to write text content 
navigator.clipboard.writeText("hello!!!");