React - 如何将图像复制到剪贴板？

Question

我正在开发 React Web 应用程序，需要实现的功能之一是在单击时复制图像，以便用户可以将其粘贴到：paint、word 等...

我尝试了几种方法，首先是按照这篇文章中详述的说明进行操作： https ://stackoverflow.com/a/40547470/9608006

这就是我想出的（containerId 指的是一个 div 元素，其中包含一个图像元素作为它的第一个子元素）：

copyImg = (containerId) => {
const imgContainerElement = document.getElementById(containerId);
this.selectText(imgContainerElement.children[0]);
document.execCommand('copy');
window.getSelection().removeAllRanges();
alert('image copied!');
}

selectText = (element) => {
    var doc = document;
    if (doc.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(element);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

没用。 我尝试在此处实施标有 2 星的解决方案： https ://www.tek-tips.com/viewthread.cfm?qid=833917

  function copyImg(imgId){
  var r = document.body.createControlRange();
  r.add(document.getElementById(imgId));
  r.select();
  r.execCommand("COPY");
}

但 createControlRange() 未定义。

我尝试使用 navigator.clipboard api，但它仅适用于 png，而该应用程序适用于 jpg。

我寻找可以完成此任务的 npm 库，但我发现的只是文本复制。 npms 喜欢：react-copy-to-clipboard

任何帮助，将不胜感激。

编辑1：

遵循 dw_ https://stackoverflow.com/a/59183698/9608006的说明，这就是我想出的：（注意：我必须 npm install babel-polyfill 并将其导入 App.js，以使异步功能工作并传递此错误：regeneratorRuntime 未定义）

    copyImg = async (imgElementId) => {
    const imgElement = document.getElementById(imgElementId);
    const src = imgElement.src;
    const img = await fetch(src);
    const imgBlob = await img.blob();
    if (src.endsWith(".jpg") || src.endsWith(".jpeg")) {
      copyService.convertToPng(imgBlob);
    } else if (src.endsWith(".png")) {
      copyService.copyToClipboard(imgBlob);
    } else {
      console.error("Format unsupported");
    }
 }

convertToPng = (imgBlob) => {
    const imageUrl = window.URL.createObjectURL(imgBlob);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const imageEl = createImage({ src: imageUrl });
    imageEl.onload = (e) => {
        canvas.width = e.target.width;
        canvas.height = e.target.height;
        ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
        canvas.toBlob(copyToClipboard, "image/png", 1);
    };
}

createImage = (options) => {
    options = options || {};
    const img = (Image) ? new Image() : document.createElement("img");
    if (options.src) {
        img.src = options.src;
    }
    return img;
  }

copyToClipboard = (pngBlob) => {
    try {
        navigator.clipboard.write([
            new ClipboardItem({
                [pngBlob.type]: pngBlob
            })
        ]);
        console.log("Image copied");
    } catch (error) {
        console.error(error);
    }
}

代码到达图像复制消息，但仍然将其粘贴到单词上时它没有显示。 另一件事是我得到

控制台错误：未捕获（承诺）DOMException

Answer 1

基于@Zohaib Ijaz 的回答并使用 HTML5 URL 和 Canvas 文章将 JPG 图像转换为 PNG 。

如果图像是 jpeg/jpg，它会首先使用 HTML5 画布将图像转换为 png。

 function createImage(options) { options = options || {}; const img = (Image) ? new Image() : document.createElement("img"); if (options.src) { img.src = options.src; } return img; } function convertToPng(imgBlob) { const imageUrl = window.URL.createObjectURL(imgBlob); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const imageEl = createImage({ src: imageUrl }); imageEl.onload = (e) => { canvas.width = e.target.width; canvas.height = e.target.height; ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height); canvas.toBlob(copyToClipboard, "image/png", 1); }; } async function copyImg(src) { const img = await fetch(src); const imgBlob = await img.blob(); if (src.endsWith(".jpg") || src.endsWith(".jpeg")) { convertToPng(imgBlob); } else if (src.endsWith(".png")) { copyToClipboard(imgBlob); } else { console.error("Format unsupported"); } } async function copyToClipboard(pngBlob) { try { await navigator.clipboard.write([ new ClipboardItem({ [pngBlob.type]: pngBlob }) ]); console.log("Image copied"); } catch (error) { console.error(error); } } function copyImageViaSelector(selector) { copyImg(document.querySelector(selector).src); }

 <img id="image" width="100" src="https://i.imgur.com/Oq3ie1b.jpg"> <button onclick="copyImageViaSelector('#image')">Copy image</button>

反应：

import React, { useRef } from "react";

const createImage = (options) => {
  options = options || {};
  const img = document.createElement("img");
  if (options.src) {
    img.src = options.src;
  }
  return img;
};

const copyToClipboard = async (pngBlob) => {
  try {
    await navigator.clipboard.write([
      // eslint-disable-next-line no-undef
      new ClipboardItem({
        [pngBlob.type]: pngBlob
      })
    ]);
    console.log("Image copied");
  } catch (error) {
    console.error(error);
  }
};

const convertToPng = (imgBlob) => {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const imageEl = createImage({ src: window.URL.createObjectURL(imgBlob) });
  imageEl.onload = (e) => {
    canvas.width = e.target.width;
    canvas.height = e.target.height;
    ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
    canvas.toBlob(copyToClipboard, "image/png", 1);
  };
};

const copyImg = async (src) => {
  const img = await fetch(src);
  const imgBlob = await img.blob();
  const extension = src.split(".").pop();
  const supportedToBeConverted = ["jpeg", "jpg", "gif"];
  if (supportedToBeConverted.indexOf(extension.toLowerCase())) {
    return convertToPng(imgBlob);
  } else if (extension.toLowerCase() === "png") {
    return copyToClipboard(imgBlob);
  }
  console.error("Format unsupported");
  return;
};

const Image = () => {
  const ref = useRef(null);
  return (
    <div>
      <img id="image" ref={ref} width="100" src="https://i.imgur.com/Oq3ie1b.jpg" alt="" />
      <button onClick={() => copyImg(ref.current.src)}>copy img</button>
    </div>
  );
};

export default Image;

已知限制：

• 不适用于 IE / Safari / (Pre-chromium) Edge。
• 仅适用于同一域中的图像，或具有宽松 CORS 设置的服务器。

Answer 2

您可以使用navigator.clipboard.write

 async function copyImg(src) { const img = await fetch(src); const imgBlob = await img.blob(); try { navigator.clipboard.write([ new ClipboardItem({ 'image/png': imgBlob, // change image type accordingly }) ]); } catch (error) { console.error(error); } }

Answer 3

你可以试试这个。 您需要为此提供一个 HTMLDivElement。

它通常是某个 div 的引用。

<div ref={node => (this._imageRef = node)}>
 <img src=""/>
</div>

您可以在构造函数中将此红色初始化为

 constructor(props) {
    super(props);

    this._imageRef = null;
  }

您需要将此 _imageRef 提供给该函数。

现在这一切都应该奏效了。

export function copyImageToClipboard(element) { // element is an ref to the div here
  const selection = window.getSelection();
  const range = document.createRange();
  const img = element.firstChild ;

  // Preserve alternate text
  const altText = img.alt;
  img.setAttribute('alt', img.src);

  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);

  try {
    // Security exception may be thrown by some browsers.
    return document.execCommand('copy');
  } catch (ex) {
    console.warn('Copy to clipboard failed.', ex);

    return false;
  } finally {
    img.setAttribute('alt', altText);
  }
}

注意：这也适用于 IE

Answer 4

使用打字稿

const copyImageToClipboard = async (imageURL?: string) => {
        if (imageURL === undefined || imageURL === null) return;

        try {
            const image = await fetch(imageURL!);
            const imageBlob = await image.blob();

            await navigator.clipboard
                .write([
                    new ClipboardItem({
                        'image/png': imageBlob,
                    })
                ]);
        } catch (error) {
            console.error(error);
        }
    }