fabricJS - 이미지에 오버레이 포커스

개요

전체 이미지를 뿌옇게 오버레이 처리하고 네모 박스를 만들어서 포커스 효과를 주고 싶을 경우

• jsfiddle : https://jsfiddle.net/yscho03/4uvjsb6L/

출처 : https://placeimg.com

 

전체 코드

var canvasWidth = 640, canvasHeight = 480;
var canvas = new fabric.Canvas('my-canvas', {
	preserveObjectStacking: 'true',
	width : canvasWidth,
	height: canvasHeight
});

canvas.setOverlayImage('https://placeimg.com/' + canvasWidth + '/' + canvasHeight + '/people', canvas.renderAll.bind(canvas), {
        top: 0,
        left: 0,
        width : canvasWidth,
        height: canvasHeight,
        lockMovementX: true,
        lockMovementY: true,
        lockRotation: true,
        selectable: false,
        globalCompositeOperation: 'destination-atop'
});

var overlayObject = new fabric.Rect({
	left: 0,
	top: 0,
	width : canvas.width,
	height: canvas.height,
	fill: '#000000',
	opacity : 0.4,
	selectable: false,
	globalCompositeOperation: 'source-over'
});
canvas.add(overlayObject);

var rectWidth = 300, rectHeight = 300;
var rectObject = new fabric.Rect({
	left: (canvas.width - rectWidth) / 2,
	top: (canvas.height - rectHeight) / 2,
	width: rectWidth,
	height: rectHeight,
	fill: '#451245',
	globalCompositeOperation: 'destination-out'
});
canvas.add(rectObject);
canvas.renderAll();

 

참고

https://stackoverflow.com/questions/58709844/how-to-make-a-hole-through-only-overlay-rectangle-using-fabric-js