javascript - 删除 Canvas 元素的图像

Question

当鼠标悬停在图像上时，我正在使用 Canvas 创建乘法效果(带有蓝色三 Angular 形)。

问题是静态图像自动适合其容器，但 Canvas 内的图像更大，尽管三 Angular 形大小合适。

是否可以删除 Canvas 内的图像，只留下蓝色三 Angular 形...所以悬停看起来没有更大的图像？我该怎么做？

这是我的 Canvas 代码:

    function to_canvas(im,w,h){
        var isIE8 = $.browser.msie && +$.browser.version === 8;
        var canvas;
        var imageBottom;
        var im_w = w;
        var im_h = h;
        var imgData;
        var pix;
        var pixcount = 0;
        var paintrow = 0;
        var multiplyColor = [70, 116, 145];
        var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
        var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
        if ( isIE8 ) {
            $('<div />' , {
                'id' : 'div-'+im,
                'class' : 'pseudo_canvas'
            }).css({
                'width' : im_w,
                'height' : im_h
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();
            $('<img>' , {
                'src' : '/img/blueborder.png',
                'class' : 'blueborder'
            }).css({
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();

        }else{
            imageBottom = document.getElementById(im);
            canvas = document.createElement('canvas');
            canvas.width = im_w;
            canvas.height = im_h;
            imageBottom.parentNode.insertBefore(canvas, imageBottom);
            ctx = canvas.getContext('2d');
            ctx.drawImage(imageBottom, -x_offset , -y_offset);
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
            pix = imgData.data;
            for (var i = 0 ; i < pix.length; i += 4) {
                if(pixcount > im_w - (im_h - paintrow) ){
                    pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                    pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                    pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
                }
                if(pixcount < im_w-1){
                    pixcount++;
                }else{
                    paintrow++;
                    pixcount = 0;
                }
            }
            ctx.putImageData(imgData, 0, 0);
            /* $('#'+im).remove(); */
        }
    }
    function multiply(topValue, bottomValue){
        return (topValue + 50) * bottomValue / 255;
    }

使用这个脚本:

    $(window).load(function(){
        $('.featured_img img').each(function(index){
            var randval = (index+1)*0;
            var _this = $(this)
            setTimeout(function(){
                _this.attr('id' , 'banner' + index);
                to_canvas('banner' + index, 620, 344);
            }, randval)
        })
    });

这就是问题所在(悬停时图像较大，但蓝色乘法三 Angular 形的大小合适):<​​/p>

这是标记(图像总是有不同的大小，这就是它自动适应容器的原因):

        <div class="featured_img">
            <img class="fittobox" src="img/slide2.jpg" alt="quisom1" width="843" height="390" />
        </div>

Answer 1

你可以改变这个:

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        ctx.drawImage(imageBottom, -x_offset , -y_offset);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        /* $('#'+im).remove(); */
    }    

对于

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        //set canvas image to the same size and position of '.featured_img im'
        //ctx.drawImage(IMAGE, TOP, LEFT, WIDTH, HEIGHT);
        ctx.drawImage(imageBottom, parseFloat($('#'+im).css('left')),parseFloat($('#'+im).css('top')),$('#'+im).attr('width'),$('#'+im).attr('height'));
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
}    

ctx.drawImage();可以像
这样设置图片的宽高ctx.drawImage(图像,x,y,宽度,高度);