剪切板常用APIcreateObjectURL()方法创建一个DOMString，该字符串包含一个URL，该URL表示

createObjectURL()方法创建一个DOMString，该字符串包含一个URL，该URL表示该方法的参数中给定的对象。新对象URL表示指定的File对象或Blob对象这个url带hash 保存在内容中

返回值： 包含该对象的对象URL的DOMString。

blob 表示二进制类型得大对象通常是影像声音或多媒体文件

//创建一个临时对象
Object.create();

//创建一个非跨域的数据源 
const url = URL.createObjectURL(object);

   //释放这个object URL
   URL.revokeObjectURL(object);

  //toBlob()方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

//第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。
 
 // 语法 :canvas.toBlob(callback, type, encoderOptions);

图片.png

Clipboard

//ClipboardItem()是浏览器原生提供的构造函数,用来生成ClipboardItem实例,它接收一个对象作为参数 该对象的键名是数据的MIME类型,键值就是数据本身
//Clipboard.write()方法用于将任意数据写入剪切板,可以是文本数据也可以是二进制数据

  Clipboard.write()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        使用脚本绘制图形
        canvas是位图（最小单位由像素组成，色彩丰富，缩放失帧）
     -->
    <canvas id="can" width="500" height="500" style="border: 1px solid red;"></canvas>
     <button id="copy">复制</button>
    <div id="qrcode"></div>
    <script src="./qrcode.js"></script>
    <script>
        var can = document.getElementById('can');

        // 获取canvas的绘制对象
        var ctx = can.getContext("2d");
        console.log(ctx);
        // 填充矩形
        // ctx.fillRect(20, 20, 200, 400);  // 黑色

  


        // 先规定填充的颜色

        ctx.fillStyle = 'pink';
        ctx.fillRect(20, 20, 200, 200); // 矩形是pink色

        ctx.strokeStyle = 'purple';  // 线条颜色
        ctx.strokeRect(20, 230, 200, 200);  // 边框矩形

 
        // ctx.clearRect(0, 0, 500, 250);  // 清除矩形区域
        ctx.clearRect(0, 0, 500, 500);  // 清除矩形区域

        // ---------------------------------------------------
        ctx.fillStyle = '#fff';

        ctx.fillRect(0, 0, 500, 500);

        // 线条

        ctx.strokeStyle = 'purple';  // 线条颜色
        ctx.beginPath(); // 准备开始

        ctx.moveTo(50, 50);  // 落笔点

        ctx.lineTo(90, 150);  // 下一个点

        ctx.lineTo(10, 150);  // 下一个点

        ctx.closePath();  // 闭合

        // ctx.stroke(); // 画线

        ctx.moveTo(500,0);

        ctx.lineTo(0,500)

        ctx.stroke(); // 画线

  


        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.font = "20px sans-serif";
        ctx.fillText('ikun', 90, 150);

        //
        new QRCode(document.getElementById("qrcode"), {
            text: "https://kuwo.cn",
            width: 128,
            height: 128,
            colorDark: "pink",
            colorLight: "#ff6700",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        // var qrcode = document.getElementById('qrcode');
        var qrImg = qrcode.getElementsByTagName('img')[0];
        console.log(qrImg);
        qrImg.onload = function () {
            ctx.drawImage(qrImg, 200, 200);
        }
        copy.onclick = function() {
            // 剪切板   需要一个参数：blob
            //toBlob()方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
            can.toBlob(function(blob) {
                console.log(blob);
                var item = new ClipboardItem({"image/png": blob});
                // 写入剪切板
                navigator.clipboard.write([item]).then(() => {
                    console.log('复制成功！');
                })
            })
        }
    </script>
</body>
</html>

剪切板 常用API

剪切板常用API