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

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

HarmonyOS
2024-05-26 12:19:44
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2024-05-27 16:06:14
相关问题
系统剪切板功能的使用
628浏览 • 1回复 待解决
JS FA调用 java PA,取到参数剪切板问题
4093浏览 • 1回复 待解决
请问怎么获取HarmonyOS的开发
16753浏览 • 8回复 待解决
如何调用系统拍照获取图片
227浏览 • 1回复 待解决
获取网络图片保存到相册
430浏览 • 1回复 待解决
HarmonyOS支持其他开发吗?
12631浏览 • 4回复 待解决
或者说能复制图片资源的方法
6839浏览 • 3回复 待解决
3516开发使用编译使用mqtt?
7010浏览 • 2回复 待解决
鸿蒙目前适配哪些开发
12872浏览 • 1回复 已解决
开发推荐或购买链接
7065浏览 • 2回复 已解决
鸿蒙开发Hi3861烧录报错?
9798浏览 • 3回复 待解决
Visual Studio Code切换开发失败
9513浏览 • 4回复 待解决
ubuntu复制512000*16个小文件硬盘
948浏览 • 1回复 待解决
Hi3861开发的mesh功能
13170浏览 • 4回复 待解决
如何将内容直接复制剪贴板
16浏览 • 1回复 待解决