网络共享 api - 从 url 或源共享图像

Question

如何<img src="example.jpg">使用 web share api 与源共享图像。这是我的代码不起作用

let file = "https://tukarjual.com/images/ads/all-category.jpg"
        let filesArray = [file]

        if (navigator.canShare && navigator.canShare({ files: filesArray })) {
            await navigator.share({
                files   : filesArray,
                title   : 'Layanan TukarJual',
                text    : 'Ayo dukung karya putra daerah Kotabaru dengan belanja online di TukarJual',
                url     : 'https://tukarjual.com'
            })
        }

Answer 1

您需要将图像作为 blob 共享。因此，首先将图像转换为 blob，然后再共享。一个简单的方法是调用fetch()：

const blob = await fetch('https://cdn.glitch.com/f96f78ec-d35d-447b-acf4-86f2b3658491%2Fchuck.png?v=1618311092497').then(r=>r.blob())

然后您可以将此 blob 传递给您的共享函数：

const share = async (title, text, blob) => {
  const data = {
    files: [
      new File([blob], 'file.png', {
        type: blob.type,
      }),
    ],
    title: title,
    text: text,
  };
  try {
    if (!(navigator.canShare(data))) {
      throw new Error("Can't share data.", data);
    }
    await navigator.share(data);
  } catch (err) {
    console.error(err.name, err.message);
  }
};