刪除畫布元素的圖像

Question

將鼠標懸停在圖像上時，我使用畫布創建多重效果（帶有藍色三角形）。

問題是，靜態圖像會自動適應其容器，但是畫布內部的圖像更大，但三角形的大小正確。

是否可以刪除畫布內部的圖像，只留下藍色的三角形......所以懸停看起來沒有更大的圖像？我該怎麼做？

這是我的畫布代碼：

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> 

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（image，x，y，width，height）;