canvas 사용하여 필터를 구현하는 것 외에도 오프스크린 기술을 사용하여 돋보기처럼 작동할 수도 있습니다.
설명의 편의를 위해 이 문서는 두 가지 응용 프로그램 부분으로 나누어져 있습니다.
drawImage 인터페이스에 캔버스 학습 및 필터 구현이 도입되었습니다. 이미지를 그리는 것 외에도 이 인터페이스는 하나의 canvas 개체를 다른 canvas 개체 위에 그릴 수도 있습니다. 이것이 오프스크린 기술이다.
코드에는 두 개의 캔버스 태그가 있습니다. 각각 보이는 것과 보이지 않는 것입니다. 보이지 않는 캔버스 객체의 Context 객체는 이미지 워터마크를 배치하는 곳입니다.
자세한 내용은 코드 주석을 참조하세요.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>캔버스 알아보기</title> <style> canvas { display: block margin: 0 auto; 222; } 입력 { 디스플레이: 블록; 여백: 20px 자동: 800px } </style></head><body> <div id=app> <캔버스 id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 step=0.1> <canvas id=watermark-canvas style=display: none;></canvas> </div> <script type=text/javascript> window.onload = function () { var canvas = document.querySelector(#my-canvas) var watermarkCanvas = document.querySelector(#watermark-canvas) var Slider = document.querySelector(input) var scale = Slider.value var ctx = canvas.getContext('2d') var watermarkCtx = watermarkCanvas.getContext(2d) /* 두 번째 캔버스에서 얻은 Context 객체에 워터마크를 추가합니다. */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = 굵은 글씨 20px Arial watermarkCtx.lineWidth = 1 watermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = 새 이미지() img.src = ./img/photo.jpg /* 이미지 로드 후 작업 수행*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height(canvas, ctx, img, scale , watermarkCanvas) // 입력 태그의 mousemove 이벤트를 수신합니다. // 참고: mousemove는 실시간으로 값 변화를 모니터링하고 많은 메모리를 소비합니다. * **********/ } /** * * @param {Object} 캔버스 캔버스 객체 * @param {Object} ctx * @param {Object} img * @param {Number} scale 크기 조정 비율* @param {Object} watermark watermark object*/ function drawImageByScale(canvas, ctx, img, scale, watermark) { //이미지 크기는 비율에 따라 조정됩니다. var width = img.width * scale, height = img. height * scale // (dx, dy): 캔버스에 img를 그리는 시작 좌표 var dx = canvas.width / 2 - width / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // 1번 캔버스 지우기 ctx.drawImage(img, dx, dy, width, height) // 2번 이미지 다시 그리기 if (워터마크) { // No3 워터마크가 있는지 확인: 예, 워터마크를 그립니다. ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height) } } </script></body></html>효과는 아래 그림과 같습니다.
슬라이더를 끌어 이미지를 확대하거나 축소합니다. 그런 다음 마우스 오른쪽 버튼을 클릭하여 이미지를 저장하세요. 저장된 이미지에는 아래와 같이 이미 워터마크가 있습니다.
3. 돋보기 구현위에서 언급한 중앙 줌을 기준으로 돋보기의 달인은 다음 두 부분에 주의해야 합니다.
코드는 다음과 같습니다:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>문서</title> <style> 캔버스 { 디스플레이: 블록; 여백: 0 자동; ; } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false, scale = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // 오프스크린 캔버스 var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //오프스크린 캔버스의 컨텍스트 객체 var img = new Image() window.onload = 함수() { img.src = ./img/photo.jpg img.onload = 함수() { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // 스케일링 비율 계산 scale = offCanvas.width / canvas.width // 처음 아는 상태에서 두 캔버스 모두 이미지를 그립니다. ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // 마우스 누름 canvas.onmousedown = function (event) { event.preventDefault() // 기본 이벤트를 비활성화합니다. var point = windowToCanvas(event.clientX, event.clientY) // 캔버스 레이블을 기준으로 마우스 좌표를 가져옵니다. isMouseDown = true drawCanvasWithMagnifier(true, point) // 화면 밖의 캔버스에 확대된 이미지를 그립니다.} // 마우스를 이동합니다. canvas.onmousemove = function(event) { event.preventDefault () / / 기본 이벤트 비활성화 if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // 마우스를 놓습니다. canvas.onmouseup = function (event) { event.preventDefault() // 기본 이벤트를 비활성화합니다. isMouseDown = false drawCanvasWithMagnifier(false) // 오프스크린 돋보기를 그리지 않습니다.} // 이동 캔버스 밖으로 마우스를 이동합니다. label canvas .onmouseout = function (event) { event.preventDefault() // 기본 이벤트 비활성화 isMouseDown = false drawCanvasWithMagnifier(false) // 화면 외부 돋보기를 그리지 않음} } /** * 캔버스 왼쪽 상단을 기준으로 마우스의 좌표를 반환합니다. * @param {Number} x 마우스의 화면 좌표 x * @param {Number} y 마우스의 화면 좌표 y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox는 화면을 기준으로 캔버스의 좌표를 저장합니다 return { x: x - bbox.x, y: 와이 - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // 캔버스 지우기 ctx.drawImage(img, 0, 0, canvas.width, canvas . height) // 캔버스에 이미지 그리기/* 돋보기를 그리려면 오프스크린 사용*/ if (isShow) { var { x, y } = point var mr = 50 // 사각 돋보기의 한 변의 길이 // (sx, sy): 확대할 이미지의 시작 좌표 var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): 확대됨 이미지의 시작 좌표 var dx = x - mr, dy = y - mr // offCanvas에서 (sx, sy)부터 시작하여 길이와 너비가 mr인 정사각형 영역을 만듭니다. // 확대 // 길이와 너비가 2 * mr인 캔버스의 (dx, dy)에서 시작하는 정사각형 가시 영역 // 이렇게 하면 확대 효과가 나타납니다. ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * 미스터, 2 * 미스터) } /************************/ } </script></body></html >돋보기의 효과는 아래 그림과 같습니다. (빨간색 펜으로 표시된 부분이 당사의 사각 돋보기입니다.)
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.