Question

我有这个错误

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

只有在我返回时将网址更改为example.com/test之类的较低页面而不是首页或其他内容时，

或者如果您在Chrome上打开DevTools并模拟电话或其他内容，然后重新加载，我也会收到此错误。

重新加载后可以正常工作。我不知道为什么...每次当您进入另一个页面时第一次重新加载，都无法正常工作。但是第二次重新加载比正常工作。

它是用于选择图像平均颜色的代码

           var blockSize = 5, // only visit every 5 pixels                   
                defaultRGB = {r:-62,g:-62,b:-62}, // for non-supporting envs                    
                canvas = document.createElement('canvas'),                    
                context = canvas.getContext && canvas.getContext('2d'),                    
                data, width, height,                    
                i = -4,                    
                length,                    
                rgb = {r:-62,g:-62,b:-62},                    
                count = 0;               

            if (!context) {                    
                return defaultRGB;                
            }              

            var imgElReady = false;
            var imgEl = new Image();
            imgEl.onload = function(){
                imgElReady = true;
            }
            imgEl.src = imageurl;

            height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;                
            width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;                
            context.drawImage(imgEl, 0, 0);             

            try {                    
                data = context.getImageData(0, 0, width, height);      
                console.log(data)
                console.log('test1')            
            } catch(e) {       
                console.log('test2')             
                return defaultRGB;                
            }    

            length = data.data.length;               
            while ( (i += blockSize * 4) < length ) {                   
                ++count;                   
                rgb.r += data.data[i];                   
                rgb.g += data.data[i+1];                   
                rgb.b += data.data[i+2];                
            }                
            // ~~ used to floor values                
            rgb.r = ~~(rgb.r/count);                
            rgb.g = ~~(rgb.g/count);                
            rgb.b = ~~(rgb.b/count);                
            return rgb;

在此示例中，当您将大小从正常更改为模拟电话或其他东西时，每次加载时，第一个负载都跳入console.log test2。而且，如果您以相同的尺寸和页面重新加载一次，那么它会起作用

我还在imgEl.src之后检查了imgEl，所有加载看起来都一样，并且有图片

我知道还有其他人遇到了该错误，但是没有人遇到与我的示例相同的问题

仅当我第二次或多次加载准确的页面时，该代码才有效。从来没有第一次加载

画布无法在'CanvasRenderingContext2D'上执行'getImageData'：源宽度为0

0 个答案: