찾다
웹 프론트엔드H5 튜토리얼Canvas를 사용하여 이미지를 처리하는 방법 소개

이 글은 주로 Canvas를 사용하여 사진을 처리하는 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

Canvas는 HTML5에 새로운 요소를 포함하며, JavaScript와 결합하여 캔버스에 그래픽을 동적으로 그릴 수 있습니다.

오늘은 Canvas에서 그래픽을 그리는 방법에 대해 이야기하지 않고 그림을 처리하는 방법에 대해 이야기하겠습니다.

과정은 아마도 매우 간단할 것입니다. 주로 다음 세 단계로 나뉩니다.

예, 마치 척하는 것과 같습니다 코끼리 냉장고에 넣는 것만큼 쉽죠, 하하.

1. 메인 API

전체 프로세스에 사용되는 메인 Canvas API는 다음과 같습니다.

    #🎜🎜 #
  1. 이미지 그리기: drawImage()

  2. 이미지 데이터 가져오기: getImageData()

  3. #🎜🎜 # 이미지 데이터 다시 쓰기: putImageData()
  4. 이미지 내보내기: toDataURL()
1. drawImage()

이름에서 알 수 있듯이 이 메서드는 캔버스 캔버스에 이미지를 그리는 데 사용됩니다.

① 위치 지정. 캔버스 이미지: context.drawImage(img,x,y)

② 캔버스에 이미지를 배치하고 이미지의 너비와 높이를 지정합니다: context.drawImage(img,x,y,width,height)

3 이미지를 자르고 잘라낸 부분을 캔버스에 위치시킵니다: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

위 매개변수 값은 다음과 같이 설명됩니다. 표:

Parameter #🎜 🎜#img사용할 이미지, 캔버스 또는 비디오를 지정합니다. 선택사항. 자르기를 시작할 X 좌표 위치입니다. 선택사항. 절단을 시작할 Y좌표 위치입니다. 선택사항. 자른 이미지의 너비입니다. 선택사항. 잘린 이미지의 높이입니다. 캔버스에 이미지의 x 좌표 위치를 배치합니다. 캔버스에 이미지의 y 좌표 위치를 배치합니다. 선택사항. 사용할 이미지의 너비입니다. (이미지 늘리기 또는 줄이기) 선택사항. 사용할 이미지의 높이입니다. (이미지 늘리기 또는 줄이기) 2.getImageData()
Description #🎜🎜 #
sx
sy
x
y
너비
height

이 방법 사용 캔버스 캔버스에서 이미지 데이터를 얻으려면 구체적인 사용법은 다음과 같습니다: 캔버스의 지정된 직사각형 범위 내의 픽셀 데이터를 가져옵니다: var ImageData = context.getImageData(x,y,width ,height)

위 매개변수 값은 다음 표에 설명되어 있습니다.


ParameterDescription # 🎜🎜#x복사를 시작하려면 왼쪽 상단의 x 좌표를 사용하세요. y왼쪽 상단의 y 좌표가 복사를 시작합니다. width복사할 직사각형 영역의 너비입니다. height복사할 직사각형 영역의 높이입니다. 3.putImageData()
이 메서드는 너비, 높이, 데이터의 세 가지 속성을 갖는 ImageData 객체를 반환하며, 우리가 주로 사용하는 속성은 다음과 같습니다. 왜냐하면 이미지의 각 픽셀의 데이터를 저장하기 때문입니다. 이러한 데이터를 얻은 후에는 이를 처리하고 최종적으로 캔버스 캔버스에 다시 작성하여 그림 처리 및 변환을 실현할 수 있습니다. 데이터 배열의 구체적인 사용법은 다음 예에서 확인할 수 있습니다.

이 방법은 매우 간단하며 이미지 데이터를 캔버스 캔버스에 다시 쓰는 데 사용됩니다. 사용법은 다음과 같습니다:

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

위의 매개변수 값은 다음 표에 설명되어 있습니다.

#🎜🎜 ## ## ######매개 변수#######설명#### ## ## ## ## ####imgdata#🎜 🎜#

은 캔버스의 ImageData 개체를 다시 넣도록 지정됩니다.

xImageData 개체 왼쪽 위 모서리의 x 좌표(픽셀)입니다. ImageData 개체 왼쪽 위 모서리의 y 좌표(픽셀)입니다.
y
dirtyX 선택사항. 캔버스에 이미지를 배치할 가로 값(x)(픽셀 단위)입니다.
dirtyY 선택사항. 캔버스에 이미지를 배치할 가로 값(y)(픽셀 단위)입니다.
dirtyWidth 선택사항. 캔버스에 이미지를 그리는 데 사용되는 너비입니다.
dirtyHeight 선택사항. 캔버스에 이미지가 그려지는 높이입니다.

4. toDataURL()

这个方法与以上三种方法不同,它是Canvas对象的方法,该方法返回的是一个包含data URI的字符串,该字符串可直接作为图片路径地址填入Canvas를 사용하여 이미지를 처리하는 방법 소개标签的src属性当中,具体用法如下:

var dataURL = canvas.toDataURL(type, encoderOptions);

以上参数值描述如下表:

参数 描述
type 可选。图片格式,默认为 image/png。
encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

二、图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

//JavaScript
window.onload = function(){
    var canvas = document.getElementById("canvas"),   //获取Canvas画布对象
        context = canvas.getContext(&#39;2d&#39;);  //获取2D上下文对象,大多数Canvas API均为此对象方法
    var image = new Image();  //定义一个图片对象
    image.src = &#39;imgs/img.jpg&#39;;  
    image.onload = function(){  //此处必须注意!后面所有操作均需在图片加载成功后执行,否则图片将处理无效
        context.drawImage(image,0,0);  //将图片从Canvas画布的左上角(0,0)位置开始绘制,大小默认为图片实际大小
        var handle = document.getElementById("handle");
        var create = document.getElementById("create");
        handle.onclick = function(){  // 单击“处理图片”按钮,处理图片
            var imgData = context.getImageData(0,0,canvas.width,canvas.height);   //获取图片数据对象
            var data = imgData.data;  //获取图片数据数组,该数组中每个像素用4个元素来保存,分别表示红、绿、蓝和透明度值
            var average = 0;
            for (var i = 0; i < data.length; i+=4) {
                average = Math.floor((data[i]+data[i+1]+data[i+2])/3);  //将红、绿、蓝色值求平均值后得到灰度值
                data[i] = data[i+1] = data[i+2] = average;  将每个像素点的色值重写
            }
            imgData.data = data;
            context.putImageData(imgData,0,0);  //将处理后的图像数据重写至Canvas画布,此时画布中图像变为黑白色
        };
        create.onclick = function(){  // 单击“生成图片”按钮,导出图片
            var imgSrc = canvas.toDataURL();  //获取图片的DataURL
            var newImg = new Image();
            var result = document.getElementById("result");
            newImg.src = imgSrc;  //将图片路径赋值给src
            result.innerHTML = &#39;&#39;;
            result.appendChild(newImg);
        };
    };
};

可能上面代码写得不是很好,看起来也不是那么好理解,最好自己能够亲自写一写,这样对于自己理解会更加深刻一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

利用HTML5中的Canvas绘制笑脸的代码

위 내용은 Canvas를 사용하여 이미지를 처리하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 코드의 빌딩 블록 : 주요 요소 및 그 목적H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구