좌표로 정의 된 영역을 강조 표시하여 이미지를 변경하려고합니다.캔버스/JS로 이미지 강조 표시
나는 서로의 상단에 두 개의 캔버스를 사용하고있다. 이제는 이것이 이것이 가장 좋은 방법인지는 모르겠습니다. 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>
현재, 나는 두 이미지를 사용하고 있지만, 캔버스에 마스크를 사용하는 어떤 방법이 있는지 궁금하다.
두 번째로, 스택 캔버스의 출력을 저장하고 싶습니다.
은 무엇 @Ken는하지만 자신의 코드 예제 중 일부는 실수로 생략 된 생각했다 :
데모 : 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>
아주 좋은 예와 답, 정확히 내가 무엇을 찾고 있었습니까! 감사! – 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()을 사용하십시오.
http://deepliquid.com/content /Jcrop.html – coma
자르기 라이브러리이므로 이미지를 강조 표시하고 출력해야합니다. – jonasll