The cross-domain problem of canvas toDataURL is set to crossOrigin = 'anonymous', which does not completely solve the problem.
Today, I wrote an H5 that generates a poster on WeChat, in which a poster needs to get the user"s avatar and draw it on canvas. The avatar was obtained, and the attribute crossOrigin = "anonymous" was added to the picture when loading. There was a problem when getting the Base64-bit picture of canvas.
one of the pictures is the path of Wechat"s avatar sent to me at the back end, which is cross-domain.
ck
ckcanvastoDataURLcanvas
after testing, it is found that some mobile phones Wechat open, toDataURL can get normal base64 pictures, that is to say, cross-domain Wechat profile portrait can be obtained through toDataURL;
another part of the mobile phone reported a mistake, toDataURL can not get anything;
ask God to explain in depth, very confused, whether the front end of the problem can be solved by itself, has been completely solved.
through Baidu, I find it difficult to solve the problem completely by myself.
ask the great god to explain
if you use nginx, you can add the following line of code to the location of nginx:
add_header 'Access-Control-Allow-Origin' '*';
also encounters the same problem, but how can I combine the QR code link (not picture link) provided in the background into the poster as a dynamic value?
an answer that is not an answer
according to your description, I think the problem lies not in whether the front end can be achieved, but in the fact that different mobile browser vendors do not consistently handle cross-domain restrictions. The
protocol is dead and people are alive. Even if they don't abide by it, there's nothing you can do about it.
this problem can't be solved by relying on the front end alone, so I think doing a cross-domain agent at the back end is the only solution
it is not possible to set crossorign at the front end, and the background server has to return access.control.allow.origin. Another thing to pay attention to is whether there is a cache on the front end of the picture. If there are browsers that visit ok, for the first time and refresh it again, I won't get the data.
vue distribution agent'/ aliyuncs': {
target:' http://bndxfk.oss-cn-shenzhen.', / / destination interface domain
changeOrigin: true, / / whether to cross-domain
pathRewrite: {
'^ / aliyuncs':'/'/ / rewrite the interface
}
}
asyncinits(){
var res= await axios.get (
"/ aliyuncs/ah/20200907083638SNSn.png?Expires=1599535724&OSSAccessKeyId=LTAI4FzmqbQ5KuYaDKUZtVJd&Signature=JuFvvhnX3Sh6BrlR7c30s7XlXW8%3D", {
responseType: 'blob'
})
console.log (' > resresres', res);
var file_base64 = this.blobToBase64 (res.data, (result) = > {
console.log ('> result',result);
})
/ / console.log ('> file_base64', file_base64);
},
blobToBase64 (blob, callback) {
let a = new FileReader ();
a.onload = function (e) {
callback (e.target.result);
}
a.readAsDataURL (blob);
},
