JavaScript是否可以复制gif到剪切板

Question

可以将图片 url 转化为 base64，再创建 blob，写入到剪切板
gif 的 url 也可以转化为 base64，是否可以复制到剪切板呢

fetch(targetsrc)
  .then(respone => respone.blob()) // 将响应体转换成 blob 格式数据
  .then(blob => {
    let reader = new FileReader();
    reader.onloadend = function() {
      console.log(reader.result); // 输出 DataURL数据
    };
    reader.readAsDataURL(blob); // 将 blob 数据转换成 DataURL 数据
  })
  .catch(console.error);

const base64Data = reader.result.split(';base64,')[1];
const blobInput = convertBase64ToBlob(base64Data, 'image/gif');
const clipboardItemInput = new ClipboardItem({ 'image/gif': blobInput });
navigator.clipboard.write([clipboardItemInput]);

function convertBase64ToBlob(base64, type) {
  var bytes = window.atob(base64);
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: type });
}

转换为 blob 的 blobInput 可以正常显示在控制台
会提示 DOMException: Type image/gif not supported on write.

Answer 1

目前不可以。各浏览器对于 Clipboard API 里各 MIME type 的支持还很有限。

Chromium 上已有一个 issue，好奇的话可以在那里追踪。眼下更有希望下一步支持的剪切板 MIME type 列表可以看 这里 的 BlockedOn，GIF 还不在里面。