最近有个项目,需要截图,想到截图就想到canvas,想到canvas就想到html2canvas。。。
问题:无法截取图片,有图片的直接空白了。
原因:经过观察研究发现,canvas在调用drawImage方法的时候,是会受到浏览器同源策略限制的。
解决方法:前端设置useCORS为true,后端将图片设置允许跨域共享(即相应头里面要带上access-control-allow-origin)
遇到这种问题,我很淡定,作为一个成熟的库,这么常见的问题肯定是有解决策略的。翻开官网,找到了这两个参数:
但是不管我怎么弄,加一个还是都加上,都不起作用。有点慌。。。
只能看下网友是怎么解决的了。
有说转base64的,但最后发现绕不开drawImage。
还有就是用useCORS,这个官网也有写:
但加上也没有作用。最后发现,这是需要后端配合使用的。要让这个参数生效,请求的图片必须带有下面这个字段:
最后,问题解决了,还是绕不开后端。