Canvas를 사용하여 이미지를 처리하는 방법 소개

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

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

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

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

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

1. 메인 API

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

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

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

#🎜🎜 # 이미지 데이터 다시 쓰기: putImageData()
이미지 내보내기: 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的字符串，该字符串可直接作为图片路径地址填入标签的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('2d');  //获取2D上下文对象，大多数Canvas API均为此对象方法
    var image = new Image();  //定义一个图片对象
    image.src = 'imgs/img.jpg';  
    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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

R.E.P.O. 저축 설명 (및 파일 저장)

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

더보기

뜨거운 주제

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

7563

15

Cakephp 튜토리얼

1385

52

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

84

11

Win11 활성화 키 영구

61

19

NYT 연결 힌트와 답변

28

99

더보기

Related knowledge

H5 프로젝트를 실행하는 방법 Apr 06, 2025 pm 12:21 PM

H5 프로젝트를 실행하려면 다음 단계가 필요합니다. Web Server, Node.js, 개발 도구 등과 같은 필요한 도구 설치. 개발 환경 구축, 프로젝트 폴더 작성, 프로젝트 초기화 및 코드 작성. 개발 서버를 시작하고 명령 줄을 사용하여 명령을 실행하십시오. 브라우저에서 프로젝트를 미리보고 개발 서버 URL을 입력하십시오. 프로젝트 게시, 코드 최적화, 프로젝트 배포 및 웹 서버 구성을 설정하십시오.

H5 페이지 제작은 정확히 무엇을 의미합니까? Apr 06, 2025 am 07:18 AM

H5 Page 프로덕션은 HTML5, CSS3 및 JavaScript와 같은 기술을 사용하여 크로스 플랫폼 호환 웹 페이지의 생성을 말합니다. 핵심은 브라우저의 구문 분석 코드, 렌더링 구조, 스타일 및 대화식 기능에 있습니다. 일반적인 기술에는 애니메이션 효과, 반응 형 디자인 및 데이터 상호 작용이 포함됩니다. 오류를 피하려면 개발자를 디버깅해야합니다. 성능 최적화 및 모범 사례에는 이미지 형식 최적화, 요청 감소 및 코드 사양 등이 포함됩니다. 로딩 속도 및 코드 품질을 향상시킵니다.

H5를 만드는 방법 아이콘을 클릭하십시오 Apr 06, 2025 pm 12:15 PM

H5 클릭 아이콘을 생성하는 단계에는 다음이 포함됩니다. 이미지 편집 소프트웨어에서 정사각형 소스 이미지 준비. H5 편집기에 상호 작용을 추가하고 클릭 이벤트를 설정하십시오. 전체 아이콘을 덮는 핫스팟을 만듭니다. 페이지로 점프하거나 애니메이션 트리거링과 같은 클릭 이벤트의 동작을 설정하십시오. h5 문서를 HTML, CSS 및 JavaScript 파일로 내보내십시오. 내보내는 파일을 웹 사이트 또는 기타 플랫폼에 배포하십시오.

H5 프로그래밍 언어는 무엇입니까? Apr 03, 2025 am 12:16 AM

H5는 독립형 프로그래밍 언어가 아니라 최신 웹 애플리케이션을 구축하기위한 HTML5, CSS3 및 JavaScript 모음입니다. 1. HTML5는 웹 페이지 구조와 컨텐츠를 정의하고 새로운 태그와 API를 제공합니다. 2. CSS3은 스타일과 레이아웃을 제어하고 애니메이션과 같은 새로운 기능을 소개합니다. 3. JavaScript는 동적 상호 작용을 구현하고 DOM 작업 및 비동기 요청을 통해 기능을 향상시킵니다.

H5 페이지 제작에 적합한 응용 프로그램 시나리오 Apr 05, 2025 pm 11:36 PM

H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.

H5로 팝업 창을 만드는 방법 Apr 06, 2025 pm 12:12 PM

H5 팝업 창 생성 단계 : 1. 트리거링 메소드를 결정합니다 (클릭, 시간, 종료, 스크롤); 2. 디자인 컨텐츠 (제목, 텍스트, 액션 버튼); 3. 세트 스타일 (크기, 색상, 글꼴, 배경); 4. 코드 구현 (HTML, CSS, JavaScript); 5. 테스트 및 배포.

H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

H5는 무엇을 언급합니까? 맥락 탐색 Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

See all articles

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved