Javascript 用canvas/JS突出显示图像区域_Javascript_Html_Canvas

Javascript 用canvas/JS突出显示图像区域

javascript html canvas

Javascript 用canvas/JS突出显示图像区域,javascript,html,canvas,Javascript,Html,Canvas,我试图通过突出显示由坐标定义的区域来改变图像我用了两张画布，一张一张。现在我不知道这是不是最好的方法您的浏览器不支持HTML5画布您的浏览器不支持HTML5画布目前，我正在使用两个图像，但我想知道是否有任何方法可以在画布上使用遮罩其次，我想保存堆叠画布的输出。您可以使用单个画布： ➔ 绘制完整的图像 ➔ 在顶部绘制一个透明的黑色矩形 ➔ 使用带有剪裁设置的drawImage（）例如： // draw full image ctx.drawImage(img, 0, 0); //

我试图通过突出显示由坐标定义的区域来改变图像

我用了两张画布，一张一张。现在我不知道这是不是最好的方法

您的浏览器不支持HTML5画布
您的浏览器不支持HTML5画布

目前，我正在使用两个图像，但我想知道是否有任何方法可以在画布上使用遮罩

其次，我想保存堆叠画布的输出。

您可以使用单个画布：

➔ 绘制完整的图像
➔ 在顶部绘制一个透明的黑色矩形
➔ 使用带有剪裁设置的

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是要高亮显示的区域

要保存为图像，只需在canvas元素上使用

toDataURL（）

。

正如@Ken所说，但我认为他的一些代码示例被意外省略：

演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-cw=700；
var-ch=438；
var img=新图像（）；
img.onload=启动；
img.src=“cat.jpg”；
函数start（）{
画布宽度=cw；
canvas.height=ch；
//在画布上绘制图像
ctx.drawImage（img，0,0，cw，ch）；
//用50%的黑色填充使图像变暗
ctx.save（）；
ctx.globalAlpha=.50；
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0，cw，ch）；
ctx.restore（）；
//ctx.clip（）要高亮显示的区域
//然后重新绘制整个图像
//（图像将仅在剪裁区域中绘制）
ctx.save（）；
ctx.beginPath（）；
ctx.clearRect（300100200100）；
ctx.rect（300100200100）；
ctx.clip（）；
ctx.drawImage（img，0,0，cw，ch）；
ctx.restore（）；
}
}); // end$（函数（）{}）；

这是一个裁剪库，我需要突出显示并输出一个图像。我是在

加载时添加这个吗？@jonasll是的，或者至少在发生加载后添加。非常好的示例和答案，正是我想要的！谢谢
// 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);

<!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>