html2canvas图片跨域无法加载的问题

最近有个项目&＃xff0c;需要截图&＃xff0c;想到截图就想到canvas&＃xff0c;想到canvas就想到html2canvas。。。

问题&＃xff1a;无法截取图片&＃xff0c;有图片的直接空白了。

原因&＃xff1a;经过观察研究发现&＃xff0c;canvas在调用drawImage方法的时候&＃xff0c;是会受到浏览器同源策略限制的。

解决方法&＃xff1a;前端设置useCORS为true&＃xff0c;后端将图片设置允许跨域共享&＃xff08;即相应头里面要带上access-control-allow-origin&＃xff09;

遇到这种问题&＃xff0c;我很淡定&＃xff0c;作为一个成熟的库&＃xff0c;这么常见的问题肯定是有解决策略的。翻开官网&＃xff0c;找到了这两个参数&＃xff1a;

但是不管我怎么弄&＃xff0c;加一个还是都加上&＃xff0c;都不起作用。有点慌。。。
只能看下网友是怎么解决的了。
有说转base64的&＃xff0c;但最后发现绕不开drawImage。
还有就是用useCORS&＃xff0c;这个官网也有写&＃xff1a;

但加上也没有作用。最后发现&＃xff0c;这是需要后端配合使用的。要让这个参数生效&＃xff0c;请求的图片必须带有下面这个字段&＃xff1a;

最后&＃xff0c;问题解决了&＃xff0c;还是绕不开后端。

跨域资源共享 (CORS)