直接粘贴到 HTML img 元素

Question

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

原问题：

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

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 "";
  }
}

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

我知道我可以 "easily" 在图像上过度 canvas 并且它完全按预期工作。我解决这个问题的问题是（（我正在玩弄另一个对象只是为了作为一种解决方法，我不妨使用 canvas 来保存 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";

以上是我想从事的工作；下面是一个黑客。


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://developer.mozilla.org
火狐 77.0.1

Answer 1

这需要几个不同的想法并将它们放在一起：您的剪贴板数据过滤器（略有修改），并使用 FileReader class 将其变成 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">

直接粘贴到 HTML img 元素

Pasting directly to an HTML img element

html

javascript

clipboard

image

cross-browser