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

12style
  • 36

可以将图片 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.

回复
阅读 335
1 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏