小编bra*_*ray的帖子

所以在Firefox中我在canvas元素上使用drawImage时会在控制台中出现此错误.

"IndexSizeError: Index or size is negative or greater than the allowed amount"

一切都在Chrome中正常运行.我发现的常见原因是返回负值或尝试在图像实际加载之前将图像绘制到画布.似乎都不是这种情况.我在这里错过了什么？

任何想法将不胜感激.http://jsfiddle.net/Ra9KQ/3/

var NameSpace = NameSpace || {};

NameSpace.Pixelator = (function() {

    var _cache = {
        'wrapper' : null,
        'canvas'  : null,
        'ctx'     : null,
        'img'     : new Image()
    },

    _config = {
        'canvasWidth'      : 250,
        'canvasHeight'     : 250,
        'isPlaying'        : false,
        'distortMin'       : 3,
        'distortMax'       : 100,
        'distortValue'     : 100, // matches distortMax by default
        'initDistortValue' : 3,
        'speed'            : 2.5,
        'delta'            : 2.5,   // …

我一直在尝试使用canvas元素,并且很好奇如何实现效果.

我从一系列教程和演示中得到了我正在寻找的东西,但我需要一些帮助才能完成剩下的工作.我正在寻找的是将图像像素化mouseover,然后重新聚焦/取消像素化mouseout.当鼠标悬停在主旋转木马下方的块上时,您可以在http://www.cropp.com/上看到一个很好的效果示例.

这是我开始的小提琴的链接.小提琴不起作用,因为你不能使用跨域图像(womp womp),但到目前为止你仍然可以看到我的代码.当鼠标悬停在我的画布对象上时,我能够将图像像素化,但它有点落后于我想要的东西.任何帮助或建议将不胜感激.

var pixelation = 40,
    fps = 120,
    timeInterval = 1000 / fps, 
    canvas = document.getElementById('photo'),
    context = canvas.getContext('2d'),
    imgObj = new Image();

imgObj.src = 'images/me.jpg';
imgObj.onload = function () {    
    context.drawImage(imgObj, 0, 0);
};

canvas.addEventListener('mouseover', function() {
    var interval = setInterval(function () {
        context.drawImage(imgObj, 0, 0);

        if (pixelation < 1) {
            clearInterval(interval);
            pixelation = 40;
        } else {
            pixelate(context, canvas.width, canvas.height, 0, 0);
        }
    }, timeInterval); …