The canvas image is saved locally and copied to the clipboard

<!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>

Note: The copy clipboard function can be used in the local environment and https environment, but cannot be used in the http environment, api restrictions

The canvas image is saved locally and copied to the clipboard

Guess you like