OSS文件下载-html2canvas 图片跨域分析

原创于 2024-04-28 11:53:21 发布 · 440 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何利用html2canvas库将DOM转换为海报图片，并在遇到跨域问题时，通过配置Access-Control-Allow-Origin和使用匿名模式（不携带用户cookie信息）以及处理Sec-Fetch-Mode为CORS来确保图片下载成功。

html2canvas 将 dom 转海报图片下载

const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true, // 配置允许跨域
dpi: 300 // 处理模糊问题
};
console.log("获取指定的宽高", width, height, canvas);
html2canvas(canvasDom, options)

阿里云后台配置 Access-Control-Allow-Origin: *，允许图片跨域访问

request header	`img = new Image();` `img.src=""`	`img = new Image();` `img.crossOrigin = 'anonymous';` `img.src=""`
Sec-Fetch-Dest	image	image
Sec-Fetch-Mode	no-cors	cors
Sec-Fetch-Site	cross-site	cross-site

img.crossOrigin = ‘anonymous’;
对其理解：匿名模式，即请求的时候，不携带能够标识用户 cookie 信息
开启后，会发现请求 header 的 Sec-Fetch-Mode 会变成：cors，即要求后端设置 cors response header
如下图，是 html2cancavas

在这里插入图片描述