html5 - canvas sometimes cannot get toDataURL data

Question

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();
                    });
        }

Answer 1

The image is too large. Calling canvas.toDataURL sometimes fails. It is recommended to compress the image before calling and see if this article can help you with file uploading

Answer 2

I often encounter this kind of thing, there are various reasons, usually the parameters are wrong, take a look
ctx.drawImage(img,opt.left,opt.top,imgW,imgH,0, 0,width,height);
Whether the parameters in this line have values ​​(please print the information directly on the line above this line of statement).
If there is no error, you can only slowly interrupt one module one by one to eliminate it.