html5 - canvas sometimes cannot get toDataURL data
Questions: 1. I don’t know why, canvasSometimes can’t get the drawing data, only “data:;”. Please tell me where I wrote this wrong. 2. When I write canvas like this, there is nothing that needs to be optimized
Related codes:
initCanvas:function(opt){
var self=this;
var img=new Image();
var ctx,type=opt?2:1;
img.setAttribute('crossOrigin', 'anonymous');
img.onload=function(){
var $img=self._view._cropBlock.find('img');
var sizes,ratio;
var imgW=img.width;//要截取的图片（引用的图片）宽度
var imgH=img.height;
console.log('img',imgW,imgH);
if(!opt){
sizes=self.getCanvasSize($img);
opt={
left:0,
top:0,
width:sizes.width,//画布的宽度
height:sizes.height//画布的高度
};
ratio=Number((opt.width/img.width).toFixed(2));
}else{
ratio=Number(($img.width()/img.width).toFixed(2))-0.01;//实际img元素和图片实际比例，四舍五入需减0.01
opt.left=opt.left/ratio;//opt的参数值是基于实际img元素的，要获得基于实际图片的值
opt.top=opt.top/ratio;
imgW=opt.width/ratio;
imgH=opt.height/ratio;
}
self.canvas = document.createElement('canvas');
$.extend(self.canvas,{width:opt.width,height:opt.height});
ctx = self.canvas.getContext('2d');
ctx.save();
var width=self.canvas.width||400;
var height=self.canvas.height||400;console.log(self.canvas,width,height);
ctx.clearRect(0,0,width,height);
ctx.drawImage(img,opt.left,opt.top,imgW,imgH,0,0,width,height);
ctx.restore();
self.getSearchList(self.canvas,{imgUrl:img.src,type:type});
self.canvas.remove();
};
img.onerror=function(err){
console.log('canvas error:'+err);
};
img.src=this._model.currentImg;
},
getSearchList:function(canvas,opt,callback){
var self=this;
var url=canvas.toDataURL("image/jpeg",0.2);
$.extend(opt,{imgUrlBase64:url});
callback=callback|| $.noop;
common.services.getRecognizedResultList(opt)
.success(function(data){
self.searchList=data.results;
callback();
});
}
