复制图片到剪切板并获取剪切板消息

HarmonyOS

薯条包装盒

2024-05-26 12:19:44

浏览

回答 1

待解决

回答 1

按赞同

按时间

yu_qingbo

用canvas标签绘制图片，然后调用clipboard的方法将canvas的内容复制到剪切板上

什么是canvas？

是HTML5提供的一种新的标签。
Canvas是一个矩形区域的画布，可以用JavaScript在上面绘图。控制每一个像素。
canvas标签使用JavaScript在网页上绘制图像，本身不具备绘图功能。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等。

核心代码解释

在 canvas 上绘制一张图片代码

var img = new Image(); 
img.src = "https://picsum.photos/800/600"; 
img.onload = function() { 
  ctx.drawImage(img, 0, 0); 
}

复制 canvas 内容到剪贴板

img.setAttribute("crossorigin", "anonymous"); 
// 复制 canvas 内容到剪贴板 
function copyToClipboard() { 
  canvas.toBlob(function(blob) { 
    var item = new ClipboardItem({ "image/png": blob }); 
    navigator.clipboard.write([item]); 
  }); 
}

获取剪切板内容

function getClip() { 
  const destinationImage = document.querySelector("#destination"); 
  navigator.clipboard.read().then((text) => { 
    console.log(text) 
    for (const item of text) { 
      if (!item.types.includes("image/png")) { 
        throw new Error("Clipboard contains non-image data."); 
      } 
      const blob = item.getType("image/png").then(blob => { 
        console.log(blob) 
        destinationImage.src = URL.createObjectURL(blob); 
      }); 
    } 
  }) 
}

整体代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <title>Canvas Image to Clioboard</Canvas></title> 
    <style> 
       canvas{ 
           border: 1px solid #ccc; 
      } 
    
    </style> 
</head> 
<body> 
<canvas id="canvas" width="800" height="600"></canvas> 
<button onclick="copyToClipboard()">复制图片到剪贴板</button> 
<button onclick="getClip()">获取剪切板的数据</button> 
<img src="" id="destination"/> 
</body> 
<script> 
   var canvas = document.getElementById("canvas"); 
   var ctx = canvas.getContext("2d"); 
   // 在 canvas 上绘制一张图片 
   var img = new Image(); 
   img.src = "https://picsum.photos/800/600"; 
   img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
   } 
   img.setAttribute("crossorigin", "anonymous"); 
   // 复制 canvas 内容到剪贴板 
   function copyToClipboard() { 
     canvas.toBlob(function(blob) { 
       var item = new ClipboardItem({ "image/png": blob }); 
       navigator.clipboard.write([item]); 
    }); 
   } 
   //获取剪切板内容 
   function getClip(){ 
     const destinationImage = document.querySelector("#destination"); 
       navigator.clipboard.read().then((text)=>{ 
         console.log(text) 
         for (const item of text) { 
           if (!item.types.includes("image/png")) { 
              throw new Error("Clipboard contains non-image data."); 
           } 
           const blob =  item.getType("image/png").then(blob=>{ 
             console.log(blob) 
             destinationImage.src = URL.createObjectURL(blob); 
           }); 
         } 
      }) 
  }    
</script> 
</html>

2024-05-27 16:06:14

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

复制图片到剪切板并获取剪切板消息

订阅鸿蒙技术特刊，精选内容抢先看