我来帮你排查代码无法运行的问题，并且给出正确的实现方案——不管是分享指定URL的图片，还是页面里的<img>标签图片，都能搞定。

原代码的核心问题 #

你这段代码跑不起来的关键原因有两个：

• 直接用URL字符串当作文件参数：navigator.share()的files参数要求传入的是File或Blob对象的数组，而不是图片URL字符串。你直接把URL丢进去，浏览器根本识别不了这是可分享的文件。
• canShare检查无效：因为你传入的是字符串数组，navigator.canShare({ files: filesArray })会直接返回false，所以代码根本不会进入分享的逻辑块。

另外还有个容易忽略的隐性前提：Web Share API（尤其是分享文件的功能）只能在HTTPS环境下使用（本地开发的localhost是例外），而且必须由用户主动触发（比如绑定在按钮点击事件里执行，不能页面一加载就自动跑，浏览器会阻止这种非用户触发的操作）。

正确实现图片分享的步骤 #

要分享图片，不管是来自URL还是页面里的<img>标签，核心思路都是：先把图片资源转换成Blob对象，再包装成File，之后才能传给Web Share API。

情况1：分享指定URL的图片 #

下面是完整的可运行代码示例，我们会先下载图片资源，转成Blob，再执行分享：

// 给页面里的分享按钮绑定点击事件（必须由用户触发）
document.querySelector('#shareBtn').addEventListener('click', async () => {
  const imageUrl = "https://tukarjual.com/images/ads/all-category.jpg";
  
  try {
    // 1. 下载图片资源
    const response = await fetch(imageUrl);
    if (!response.ok) throw new Error('图片下载失败');
    
    // 2. 将响应转成Blob对象
    const blob = await response.blob();
    
    // 3. 把Blob包装成File对象（需要指定文件名和对应的MIME类型）
    const file = new File([blob], 'tukarjual-category.jpg', { type: blob.type });
    const filesArray = [file];
    
    // 4. 检查浏览器是否支持分享该文件
    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'
      });
      console.log('分享成功');
    } else {
      console.log('当前浏览器不支持文件分享功能');
    }
  } catch (err) {
    console.error('分享过程出错:', err);
  }
});

情况2：分享页面中已有的标签图片 #

如果要分享页面里已经存在的<img>元素（比如<img id="targetImg" src="your-image.jpg">），可以通过Canvas把图片转成Blob，再进行分享：

document.querySelector('#shareImgBtn').addEventListener('click', async () => {
  const imgElement = document.querySelector('#targetImg');
  
  try {
    // 1. 创建Canvas元素，把目标图片绘制进去
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    ctx.drawImage(imgElement, 0, 0);
    
    // 2. 将Canvas内容转成Blob（这里指定为JPEG格式，也可以用image/png）
    canvas.toBlob(async (blob) => {
      if (!blob) throw new Error('图片转Blob失败');
      
      // 3. 包装成File对象
      const file = new File([blob], 'shared-tukarjual-image.jpg', { type: 'image/jpeg' });
      const 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'
        });
        console.log('分享成功');
      } else {
        console.log('当前浏览器不支持文件分享功能');
      }
    }, 'image/jpeg');
  } catch (err) {
    console.error('分享过程出错:', err);
  }
});

额外注意事项 #

• CORS限制：如果图片的URL和你的网站不同域，需要确保图片服务器配置了CORS允许跨域访问，否则fetch或者canvas.drawImage会抛出错误。
• 文件大小限制：不同浏览器对分享文件的大小有不同限制，一般建议不要分享超过10MB的图片，避免分享失败。
• 浏览器兼容性：目前Chrome、Edge、iOS Safari（15.4及以上版本）支持Web Share API的文件分享功能，Firefox暂时还不支持。

内容的提问来源于stack exchange，提问作者Hendri Arifin