html5 - kanvas kadangkala tidak boleh mendapatkan dataURLData

Question

Soalan: 1. Saya tidak tahu kenapa, kanvaskadang-kadangtidak dapat data lukisan, hanya "data:;". Tolong beritahu saya di mana saya salah menulis ini. 2. Saya menulis kanvas seperti ini. Adakah terdapat apa-apa yang perlu dioptimumkan?

Kod berkaitan:

        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

Imej terlalu besar, dan memanggil canvas.toDataURL kadangkala gagal. Adalah disyorkan untuk memampatkan imej sebelum memanggilnya dan lihat sama ada artikel ini boleh membantu anda memuat naik fail

.

Answer 2

Saya sering menghadapi perkara seperti ini, ada pelbagai sebab, selalunya parameter salah, lihatlah
ctx.drawImage(img,opt.left,opt.top,imgW,imgH,0, 0,width,height) ;
Sama ada parameter dalam baris ini mempunyai nilai (sila cetak maklumat terus pada baris di atas baris pernyataan ini).
Jika tiada ralat, anda hanya boleh mengganggu satu persatu modul secara perlahan untuk menghapuskannya.