近期一个项目需要在APP端上传图片至web服务端
看网上的常用方案一般是把图片做base64编码,之后通过ajax异步上传;
图片编码部分参考网上例子使用如下方法,
但在调用“var dataUrl=canvas.toDataURL('image/png');”时报错,
异常信息为“Uncaught Error: SECURITY_ERR: DOM Exception 18”
上传图片为手机拍照后生成的本地文件
file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/images/15285422321.jpg
查了很多资料说是canvas不允许跨域导致的,有人说需要配置 image.crossOrigin = 'anonymous';但是我这边尝试了没有效果,小弟新手,特来向各位大大请教,万望赐教!
另:小弟首次提问,有何不当之处请指正。
//压缩图片转成base64
function getBase64Image(img){
var canvas=document.createElement("canvas");
var width=img.width;
var height=img.height;
if(width>height){
if(width>100){
height=Math.round(height*=100/width);
width=100;
}
}else{
if(height>100){
width=Math.round(width*=100/height);
}
height=100;
}
canvas.width=width;
canvas.height=height;
var ctx=canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
var dataUrl=canvas.toDataURL('image/png');
alert(dataUrl)
return dataUrl.replace('data:image/png;base64,','');
}