上面的页面结构很简单，下一步我们来逐步分析一下以上功能的实现过程。

5.1 请求剪贴板写权限

默认情况下，会为当前的激活的页面自动授予剪贴板的写入权限。出于安全方面考虑，这里我们还是主动向用户请求剪贴板的写入权限：

async function askWritePermission() {   try {     const { state } = await navigator.permissions.query({       name: "clipboard-write",     });       return state === "granted";   } catch (error) {       return false;   } }

5.2 往剪贴板写入图像和普通文本数据

要往剪贴板写入图像数据，我们就需要使用 navigator.clipboard 对象提供的 write  方法。如果要写入图像数据，我们就需要获取该图像对应的 Blob 对象，这里我们可以通过 fetch API 从网络上获取图像对应的响应对象并把它转化成 Blob  对象，具体实现方式如下：

async function createImageBlob(url) {   const response = await fetch(url);   return await response.blob(); }

而对于普通文本来说，只需要使用前面介绍的 Blob API 就可以把普通文本转换为 Blob 对象：

function createTextBlob(text) {   return new Blob([text], { type: "text/plain" }); }

在创建完图像和普通文本对应的 Blob 对象之后，我们就可以利用它们来创建 ClipboardItem 对象，然后再调用 write  方法把这些数据写入到剪贴板中，对应的代码如下所示：

async function writeDataToClipboard() {   if (askWritePermission()) {     if (navigator.clipboard && navigator.clipboard.write) {         const textBlob = createTextBlob("大家好，我是阿宝哥");         const imageBlob = await createImageBlob(           "http://cdn.semlinker.com/abao.png"         );         try {           const item = new ClipboardItem({             [textBlob.type]: textBlob,             [imageBlob.type]: imageBlob,           });           select(document.querySelector("#container"));           await navigator.clipboard.write([item]);           console.log("文本和图像复制成功");         } catch (error) {           console.error("文本和图像复制失败", error);         }       }    } }

在以上代码中，使用了一个 select 方法，该方法用于实现选择的效果，对应的代码如下所示：

function select(element) {   const selection = window.getSelection();   const range = document.createRange();   range.selectNodeContents(element);   selection.removeAllRanges();   selection.addRange(range); }

通过 writeDataToClipboard 方法，我们已经把图像和普通文本数据写入剪贴板了。下面我们来使用 navigator.clipboard  对象提供的 read 方法，来读取已写入的数据。如果你需要读取剪贴板的数据，则需要向用户请求 clipboard-read 权限。

5.3 请求剪贴板读取权限

这里我们定义了一个 askReadPermission 函数来向用户请求剪贴板读取权限：

async function askReadPermission() {   try {     const { state } = await navigator.permissions.query({       name: "clipboard-read",     });     return state === "granted";   } catch (error) {     return false;   } }

当调用 askReadPermission 方法后，将会向当前用户请求剪贴板读取权限，对应的效果如下图所示：

5.4 读取剪贴板中已写入的数据

创建好 askReadPermission 函数，我们就可以利用之前介绍的 navigator.clipboard.read  方法来读取剪贴板的数据了：

async function readDataFromClipboard() {   if (askReadPermission()) {     if (navigator.clipboard && navigator.clipboard.read) {       try {         const clipboardItems = await navigator.clipboard.read();         for (const clipboardItem of clipboardItems) {           console.dir(clipboardItem);           for (const type of clipboardItem.types) {             const blob = await clipboardItem.getType(type);             console.log("已读取剪贴板中的内容：", await blob.text());           }         }       } catch (err) {          console.error("读取剪贴板内容失败: ", err);       }      }    } }

其实，除了点击 粘贴 按钮之外，我们还可以通过监听 paste 事件来读取剪贴板中的数据。需要注意的是，如果当前的浏览器不支持异步 Clipboard  API，我们可以通过 clipboardData.getData 方法来读取剪贴板中的文本数据：

document.addEventListener('paste', async (e) => {   e.preventDefault();   let text;   if (navigator.clipboard) {     text = await navigator.clipboard.readText();   } else {     text = e.clipboardData.getData('text/plain');   }   console.log('已获取的文本数据: ', text); });

而对于图像数据，则可以通过以下方式进行读取：

const IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;  document.addEventListener("paste", async (e) => {   e.preventDefault();   if (navigator.clipboard) {     let clipboardItems = await navigator.clipboard.read();     for (const clipboardItem of clipboardItems) {        for (const type of clipboardItem.types) {          if (IMAGE_MIME_REGEX.test(type)) {            const blob = await clipboardItem.getType(type);            loadImage(blob);            return;          }         }      }    } else {        const items = e.clipboardData.items;        for (let i = 0; i < items.length; i++) {          if (IMAGE_MIME_REGEX.test(items[i].type)) {          loadImage(items[i].getAsFile());          return;        }     }   } });

以上代码中的 loadImage 方法用于实现把复制的图片插入到当前选区已选择的区域中，对应的代码如下：

function loadImage(file) {   const reader = new FileReader();   reader.onload = function (e) {     let img = document.createElement("img");     img.src = e.target.result;      let range = window.getSelection().getRangeAt(0);     range.deleteContents();     range.insertNode(img);   };   reader.readAsDataURL(file); }

感谢各位的阅读，以上就是“怎么实现复制图像”的内容了，经过本文的学习后，相信大家对怎么实现复制图像这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！