canvas 图片保存本地复制到剪切板

最新推荐文章于 2023-07-13 17:54:19 发布

六经注我

最新推荐文章于 2023-07-13 17:54:19 发布

阅读量841

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/violetta521/article/details/128576349

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

    <canvas id="canvas"></canvas></br>
    <button onclick="downloadLocalClick()">下载本地</button>
    <button onclick="duplicatingShearsClick()">复制到剪切板</button>

    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const img = new Image();
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
      };
      img.crossOrigin = "";
      img.src =
        "https://img2.baidu.com/it/u=1492005040,3158981175&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

      //下载本地
      function downloadLocalClick() {
        let dataURL = canvas.toDataURL({ pixelRatio: 1 });
        let link = document.createElement("a");
        link.download = '图片名字.png'; //也可以写jpg 可以任意哦
        link.href = dataURL;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        link = "";

      }
      //复制到剪切板 
      async function duplicatingShearsClick() {
        let dataURL = canvas.toDataURL({ pixelRatio: 1 });
        const data = await fetch(dataURL);
        const blob = await data.blob();
        let ClipboardItem = window.ClipboardItem;
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        alert('复制成功~~')
      }
    </script>
  </body>
</html>

注意：复制剪切板功能在本地环境、https环境可以使用，在http环境下不能使用，api限制