直接粘贴到 HTML img 元素

Question

回复：问题。 鉴于以下仅适用于 Firefox，是否有跨浏览器解决方案？还是剪贴板 API 太新（2020 年）。

原问题：

---

在 Firefox 中使用剪贴板 API。我能够复制图像并将其粘贴到画布中。

const canvas = document.createElement("canvas");
canvas.setAttribute("contenteditable", "true")
document.body.appendChild(canvas);
canvas.style = "border:solid black 1px";
canvas.addEventListener("paste", element_paste(canvas, "canvas"));

function element_paste(element, type) {
  switch (type) {
    case "image":
      return function(e) {
        element.src = image_data_transfer(e.clipboardData || window.clipboardData);
      }
    case "canvas":
      return function(e) {
        const im = new Image();
        im.src = image_data_transfer(e.clipboardData || window.clipboardData);
        im.onload = () => {
          element.width = im.width;
          element.height = im.height;
          element.getContext("2d").drawImage(im, 0, 0);
          URL.revokeObjectURL(im.src);
          delete im;
        };
      }
    default:
      return function(e) {
        var p = (e.clipboardData || window.clipboardData).getData("text");
        var t = document.createTextNode(p);
        element.appendChild(t);
      }
  }
}

function image_data_transfer(e) {
  const p = e.items;
  try {
    return URL
      .createObjectURL(Array
        .apply(null, Array(p.length))
        .map((_, i) => p[i])
        .find(e => e.kind == "file" && /image/.test(e.type))
        .getAsFile()
      );
  } catch (e) {
    console.log(e);
    return "";
  }
}

这完全符合画布的预期。 但是，如果画布更改为img；使用 "image" 作为 element_paste 中的类型，如果 html 元素允许粘贴到它，这将起作用。

我知道我可以“轻松”地将画布覆盖在图像上，并且效果完全符合预期。我解决这个问题的问题是（（我正在玩弄另一个对象只是为了作为一种解决方法，我不妨使用画布来保存 DOM 混乱。）（它很难看。））

是否有任何标志实验性或其他允许直接粘贴到 img 的标志？

const img = document.createElement("img");
const image_paste = element_paste(img,"image");

document.body.appendChild(img);
img.setAttribute("contenteditable","true");
img.addEventListener("paste",image_paste);

img.style="border:solid black 1px;min-width:100px;min-height:100px";

以上是我想做的工作；下面是一个 hack。

const canvas = document.createElement("canvas");
const img = document.createElement("img");
const image_paste = element_paste(img,"image");

document.body.appendChild(img);
document.body.appendChild(canvas);
canvas.setAttribute("contenteditable","true");
canvas.addEventListener("paste",image_paste);

canvas.style="border:solid black 1px;";
img.style="border:solid black 1px;min-width:100px;min-height:100px";

如果有一种方法可以在没有任何脚本的情况下工作，那就更好了！

来源：

• Paste an image from clipboard using JavaScript
• https://stackoverflow.com/a/10050831/5092123
• https://developer.mozilla.org
• 火狐77.0.1

Answer 1

这需要几个不同的想法并将它们组合在一起：您的剪贴板数据过滤器（稍作修改），并使用FileReader 类将其转换为dataurl，可以应用于img 对象。

有趣的是......虽然...选择了图像对象本身时似乎并不工作。

const image = document.getElementById('img')
document.addEventListener('paste', convertToImage)

function convertToImage(e) {
  var blob = image_data_transfer(e.clipboardData)
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result);
      image.src = event.target.result
      alert('pasted!')
    }; // data url!
    reader.readAsDataURL(blob);
  } else {
    console.log("couldn't read image data from clipboard")
  }


}

function image_data_transfer(clipboardData) {
  const p = clipboardData.items;
  try {
    return Array
      .apply(null, Array(p.length))
      .map((_, i) => p[i])
      .find(e => e.kind == "file" && /image/.test(e.type))
      .getAsFile()
    // URL.createObjectURL();
  } catch (e) {
    console.log(e);
    return null;
  }
}

img{
  width: 300px;
  height: 300px;
  border: 1px solid;
  background: #ccc;
}

<div>
  Paste here!
</div>

<img id="img" src="" onpaste="convertToImage">