html2canvas跨域问题

1 背景

在开发网页转图片功能时，使用html2canvas库将网页内容转换为图片，oss图片无法展示。

2 问题探究

原因分析

html2canvas在渲染过程中会创建Image对象来加载页面中的图片资源。如果这些资源来自不同的域，可能会触发浏览器的同源策略，导致资源加载失败。

踩坑经历

1 初次尝试

• 根据网上的教程，我尝试给<img>标签添加了crossorigin="anonymous"属性。
• 同时在html2canvas的配置中增加了useCORS: true选项。

html2canvas(this.$refs.content, { useCORS: true }).then(function (canvas) {
  const imgData = canvas.toDataURL('image/png');
  ...........
});

• 后端在OSS服务器端配置了Access-Control-Allow-Origin，尝试设置为*或指定IP。

2 遇到的问题

安卓设备上的功能表现正常，但在iOS设备上，由于iOS的WebView对同源策略的校验更为严格， 使图片都无法展示

最终解决

oss链接转换为base64格式, 赋值到img的src属性里

代码实现

• template部分

<img :src="imageBase64" class="cover">

• js部分

getData() {
   const coverUrl = await this.imgUrlToBase64(res.data.img); // 获取base64数据
   this.$set(this.imageBase64, 'imageBase64',  coverUrl);
}

imgUrlToBase64(url) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const reader = new FileReader();
    const base64String = await new Promise((resolve, reject) => {
      reader.onload = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
    return base64String;
  } catch (error) {
    console.error('Error converting image to base64', error);
}