캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?-H5 튜토리얼-php.cn

1. 什么是离屏技术？

2. 实现水印和中心缩放

3. 实现放大镜

2. 워터마크 및 중앙 크기 조정 구현

집

웹 프론트엔드

H5 튜토리얼

캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?

不言

Aug 31, 2018 am 11:57 AM

canvas html5 javascript 이미지 처리 연산

이 기사에서는 캔버스 오프 스크린 기술이 무엇인지 설명합니다. 캔버스 돋보기 효과를 얻는 방법은 무엇입니까? , 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있으므로 도움이 되기를 바랍니다.

캔버스를 사용하여 필터를 구현하는 것 외에도 오프스크린 기술 돋보기 기능을 사용할 수도 있습니다. canvas除了可以实现滤镜，还可以利用离屏技术放大镜功能。

为了方便讲解，本文分为 2 个应用部分：

实现水印和中心缩放
实现放大镜

1. 什么是离屏技术？

canvas 学习和滤镜实现介绍过drawImage接口。除了绘制图像，这个接口还可以：将一个canvas对象绘制到另一个canvas对象上。这就是离屏技术。

2. 实现水印和中心缩放

在代码中，有两个 canvas 标签。分别是可见与不可见。不可见的 canvas 对象上的 Context 对象，就是我们放置图像水印的地方。

更多详解，请看代码注释：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Canvas</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid #222;
    }

    input {
      display: block;
      margin: 20px auto;
      width: 800px
    }
  </style>
</head>
<body>
  <div id="app">
    <canvas 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(&#39;2d&#39;)
      var watermarkCtx = watermarkCanvas.getContext("2d")

      /* 给第二个canvas获取的Context对象添加水印 */
      watermarkCanvas.width = 300
      watermarkCanvas.height = 100
      watermarkCtx.font = "bold 20px Arial"
      watermarkCtx.lineWidth = "1"
      watermarkCtx.fillStyle = "rgba(255 , 255 , 255, 0.5)"
      watermarkCtx.fillText("=== yuanxin.me ===", 50, 50)
      /****************************************/

      var img = new Image()
      img.src = "./img/photo.jpg"

      /* 加载图片后执行操作 */
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
        // 监听input标签的mousemove事件
        // 注意：mousemove实时监听值的变化，内存消耗较大
        slider.onmousemove = function () {
          scale = slider.value
          drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
        }
      }
      /******************/
    }
    /**
    *
    * @param {Object} canvas 画布对象
    * @param {Object} ctx
    * @param {Object} img
    * @param {Number} scale 缩放比例
    * @param {Object} watermark 水印对象
    */
    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) // No1 清空画布
      ctx.drawImage(img, dx, dy, width, height) // No2 重新绘制图像
      if (watermark) {
        // No3 判断是否有水印: 有, 绘制水印
        ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height)
      }
    }
  </script>
</body>
</html>

로그인 후 복사

实现效果如下图所示：

캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?

拖动滑竿，即可放大和缩小图像。然后右键保存图像。保存后的图像，就有已经有了水印，如下图所示：

캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?

3. 实现放大镜

在上述中心缩放的基础上，实现放大镜主需要注意以下 2 个部分：

细化处理canvas설명의 편의를 위해 이 글은 2개의 응용 부분으로 나누어져 있습니다:

워터마크 및 중심 스케일링 구현#🎜 🎜## 🎜🎜#
돋보기 실현
1.
canvas 학습 및 필터 구현에 drawImage 인터페이스가 도입되었습니다. 이미지를 그리는 것 외에도 이 인터페이스는 캔버스 개체를 다른 캔버스 개체 위에 그립니다할 수 있습니다. 이것이 오프스크린 기술이다.

2. 워터마크 및 중앙 크기 조정 구현

코드에는 캔버스 태그가 두 개 있습니다. 각각 보이는 것과 보이지 않는 것입니다. 보이지 않는 캔버스 객체의 Context 객체는 이미지 워터마크를 배치하는 곳입니다. < img src="https://img.php.cn//upload/image/588/499/193/1535687395154865.png" title="1535687395154865.png" alt="캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?"/>#🎜 🎜 #
슬라이더를 드래그하여 이미지를 확대하거나 축소하세요. 그런 다음 마우스 오른쪽 버튼을 클릭하여 이미지를 저장하세요. 저장된 이미지에는 아래와 같이 이미 워터마크가 있습니다:
3. 구현 Magn 유리위 중앙 Zoom을 기준으로 돋보기 소유자는 다음 두 부분에 주의해야 합니다.
# 🎜🎜 # 캔버스의 마우스 응답 이벤트 처리 개선: 슬라이드 인, 슬라이드 아웃, 클릭 및 해제
오프스크린 좌표 다시 계산( 세부사항 수식 계산 아이디어는 코드 주석을 참조하세요.)
캔버스 레이블을 기준으로 마우스 좌표를 다시 계산합니다(자세한 수식 계산 아이디어는 코드 주석 참조) #🎜🎜 ##🎜🎜 #
코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas { display: block; margin: 0 auto; border: 1px solid #222; } </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") // 离屏 canvas var ctx = canvas.getContext("2d") var offCtx = offCanvas.getContext("2d") // 离屏 canvas 的 Context对象 var img = new Image() window.onload = function () { img.src = "./img/photo.jpg" img.onload = function () { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img.height // 计算缩放比例 scale = offCanvas.width / canvas.width // 初识状态下, 两个canvas均绘制Image 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) // 获取鼠标相对于 canvas 标签的坐标 isMouseDown = true drawCanvasWithMagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图像 } // 鼠标移动 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) // 不绘制离屏放大镜 } // 鼠标移出canvas标签 canvas.onmouseout = function (event) { event.preventDefault() // 禁用默认事件 isMouseDown = false drawCanvasWithMagnifier(false) // 不绘制离屏放大镜 } } /** * 返回鼠标相对于canvas左上角的坐标 * @param {Number} x 鼠标的屏幕坐标x * @param {Number} y 鼠标的屏幕坐标y */ function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect() // bbox中存储的是canvas相对于屏幕的坐标 return { x: x - bbox.x, y: 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的正方形区域 // 放大到 // canvas上的(dx,dy)开始的长宽均为 2 * mr 的正方形可视区域 // 由此实现放大效果 ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr) } /*********************/ } </script> </body> </html>
로그인 후 복사
돋보기의 효과는 아래 사진과 같습니다.(빨간펜으로 표시한 부분은 정사각형 돋보기): #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#관련 추천: #🎜🎜##🎜🎜## 🎜🎜#【HTML5】캔버스는 돋보기 효과를 구현합니다#🎜🎜# #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#html+캔버스로 화면 캡처 구현#🎜🎜##🎜🎜# #🎜🎜#
위 내용은 캔버스 오프스크린 기술이란 무엇입니까? 캔버스 돋보기 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7514

15

Cakephp 튜토리얼

1378

52

Steam의 계정 이름 형식은 무엇입니까?

79

11

Win11 활성화 키 영구

53

19

NYT 연결 힌트와 답변

19

64

더보기

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles