用畫布突出顯示圖像區域/ JS

我想通過突出顯示由座標定義的區域來改變圖像。用畫布突出顯示圖像區域/ JS

enter image description here

我一直在使用兩個畫布是，在彼此的頂部。現在我不知道這是否是最好的方式來做到這一點。 http://jsfiddle.net/9wJu8/

<canvas id='canvas'>Your browser does not support HTML5 canvas</canvas> 
<canvas id='canvas2'>Your browser does not support HTML5 canvas</canvas>

目前，我使用兩個圖像，但我不知道是否有任何方式在畫布上用口罩。

其次，我想保存堆疊帆布的輸出。

來源

2014-03-07 jonasll

http://deepliquid.com/content /Jcrop.html – coma

這是一個裁剪庫，我需要突出顯示並輸出圖像。 – jonasll

什麼@Ken說，但我覺得他的一些代碼示例中不小心被省略：

enter image description here

演示：http://jsfiddle.net/m1erickson/Spkhz/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var cw=700; 
    var ch=438; 

    var img=new Image(); 
    img.onload=start; 
    img.src="cat.jpg"; 
    function start(){ 
     canvas.width=cw; 
     canvas.height=ch; 

     // draw the image on the canvas 
     ctx.drawImage(img,0,0,cw,ch); 

     // darken the image with a 50% black fill 
     ctx.save(); 
     ctx.globalAlpha=.50; 
     ctx.fillStyle="black"; 
     ctx.fillRect(0,0,cw,ch); 
     ctx.restore(); 

     // ctx.clip() the area to highlight 
     // and redraw the whole image 
     // (the image will draw only in the clipping region) 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.clearRect(300,100,200,100); 
     ctx.rect(300,100,200,100); 
     ctx.clip(); 
     ctx.drawImage(img,0,0,cw,ch); 
     ctx.restore(); 

    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-03-07 00:57:19 markE

非常好的例子和答案，正是我期待的！謝謝！ – jonasll

您可以使用一個單一的畫布此：

➔繪製完整的圖像
➔畫一個透明的黑色長方形頂部
➔使用drawImage()剪報設置

例如：

// draw full image 
ctx.drawImage(img, 0, 0); 

// cover with a darkened overlay 
ctx.fillStyle = 'rgba(0,0,0, 0.5); 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

// draw region of image 
ctx.drawImage(img, x, y, w, h, x, y, w, h);

其中x，y，w和h是您想要突出顯示的區域。

要保存爲圖像，只需在畫布元素上使用toDataURL()即可。

來源

2014-03-07 00:23:17 K3N

我會在'onload'中加入嗎？ – jonasll

@jonasll是的，或者至少在一個onload發生之後。 – K3N

用畫布突出顯示圖像區域/ JS

回答

相關問題