html2canvas图片跨域问题

在Web开发中，当使用html2canvas这个库将HTML元素转换为图片时，可能会遇到跨域问题。这通常发生在转换的元素中包含来自不同域的图片时。由于浏览器的同源策略限制，html2canvas默认不会渲染跨域的图片。为了解决这个问题，需要同时做以下配置：

1、配置html2canvas的useCORS选项

你可以在调用html2canvas时，设置useCORS选项为true，以告诉库尝试加载跨域的图片。这样，html2canvas会尝试使用CORS（跨源资源共享）机制来加载图片。

import html2canvas from 'html2canvas';

html2canvas(this.$refs.content, {
    useCORS: true, // 允许跨域图片加载
    ignoreElements: (el) => {
        // 忽略不渲染的元素
        return ['mobile'].includes(el.className);
    }
}).then((canvas) => {
    this.posterUrl = canvas.toDataURL('image/png');
}).catch((error) => {
    // 处理转换过程中的错误
    console.error('html2canvas error:', error);
});

2、img 标签添加 crossOrigin 属性

img 标签增加 crossOrigin='anonymous'

3、服务端配置CORS响应头

除了客户端的配置，你还需要确保服务器端正确地配置了CORS响应头。对于存放在阿里云OSS（对象存储服务）的图片，你可以通过设置相应的CORS规则来允许跨域请求。

在阿里云OSS的CORS配置中，你需要添加允许跨域请求的域名到Access-Control-Allow-Origin头中。如果你希望允许任何域名进行访问，可以将值设置为*。但是，出于安全考虑，通常建议明确指定允许的域名列表。

以阿里云 oss 为例，配置路径如下：

找到对应的 bucket -> 数据安全 -> 跨域设置 -> 创建规则

允许 headers 中填写（以下为示例，请填写你自己的域名或 *）

access-control-allow-origin:*.tides.cn

通过结合客户端和服务端的配置，你应该能够解决在使用html2canvas时遇到的跨域问题。

本文地址：https://www.tides.cn/p_js-html2canvas-cors