0

キャンバスを使用して、画像の上にカーソルを置いたときに乗算効果 (青い三角形) を作成しています。

問題は、静的な画像が自動的にコンテナに収まるが、キャンバス内の画像は大きくなりますが、三角形は正しいサイズです。

キャンバスの内側にある画像を削除して、青い三角形だけを残すことは可能ですか?ホバーは大きな画像なしで見えますか? どうすればできますか？

これは私のキャンバスコードです:

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

これが問題です（ホバー時の大きな画像、青い乗算三角形は正しいサイズです）：

ここに画像の説明を入力

これがマークアップです (画像のサイズは常に異なるため、コンテナーに自動的に適合します)。

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

1 に答える 1

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(image,x,y,width,height); のように画像の幅と高さを設定できます。

于 2013-07-05T17:52:41.427 に答える