캔버스의 가장 재미있는 기능 중 하나는 이미지를 사용하는 기능입니다. 이들은 역동적 인 사진 합성 또는 그래프 등의 배경으로 사용하는 데 사용될 수 있습니다. 현재 텍스트를 추가하는 유일한 방법입니다 (사양에는 텍스트를 그리는 기능이 포함되어 있지 않음). 외부 이미지는 Gecko (예 : PNG, GIF 또는 JPEG 형식)에서 지원하는 모든 형식으로 사용할 수 있습니다. 같은 페이지의 다른 캔버스 요소도 소스로 사용할 수 있습니다.
캔버스의 흥미로운 특징 중 하나는 이미지 합성 또는 배경 제작 등에 사용할 수있는 이미지를 소개 할 수 있다는 것입니다. 현재 텍스트 만 이미지에 추가 할 수 있습니다 (표준 설명에는 텍스트 그리기 기능이 포함되어 있지 않음). Gecko가 지원하는 이미지 (예 : PNG, GIF, JPEG 등)가 캔버스에 도입 될 수 있고 다른 캔버스 요소도 이미지의 소스로 사용할 수있는 한.
이미지 가져 오기는 기본적으로 두 단계 프로세스입니다.
이미지를 소개하려면 두 가지 간단한 단계 만 있으면됩니다.
1 단계를 먼저 보자. 기본적으로 4 가지 옵션이 있습니다.
첫 번째 단계를 먼저 살펴 보겠습니다. 기본적으로 네 가지 옵션이 있습니다.
document.images collection, getElementsByTagName 메소드를 사용하거나 이미지의 ID 속성을 알고있는 경우 worde.getElementById 메서드를 사용하여 페이지의 모든 이미지에 액세스 할 수 있습니다.
문서화, IMAGES COLLECT, DOCUPER.GETELEMENTSBYTAGNAME 메소드 또는 DOCINE.GETELEMENTBYID 메소드를 통해 페이지에서 이미지를 가져올 수 있습니다.
일반적인 이미지와 마찬가지로 문서를 사용하여 다른 캔버스 요소에 액세스하십시오. getElementsByTagName 메소드 또는 oxpore.getElementById 메서드. 대상 캔버스에서 사용하기 전에 소스 캔버스에 무언가를 그려야합니다.
참조 페이지의 이미지와 유사하게 문서를 사용하십시오. 그러나 당신이 소개해야 할 것은 준비된 캔버스입니다.
이것의 더 실용적인 용도 중 하나는 다른 큰 캔버스의 썸네일보기로 두 번째 캔버스 요소를 사용하는 것입니다.
일반적인 응용 프로그램은 다른 큰 캔버스에 대한 썸네일을 만드는 것입니다.
<또 다른 옵션은 스크립트에서 새 이미지 객체를 만드는 것입니다. 이 접근법의 주요 실패는 이미지가로드 될 때까지 대기해야하기 때문에 스크립트가 중간에 중단되기를 원하지 않으면 일부 형태의 이미지 예압이 필요하다는 것입니다.
또한 스크립트를 사용하여 새 이미지 객체를 만들 수 있지만이 방법의 주요 단점은 이미지 장치를 기다리기 때문에 스크립트가 일시 중지되기를 원하지 않더라도 여전히 사전로드를 중단해야한다는 것입니다.
기본적으로 새 이미지 객체를 만들려면 다음을 수행합니다.
다음과 같은 간단한 방식으로 이미지를 만들 수 있습니다.
var img = new Image (); // 새 이미지 생성 ObjectImg.src = 'myimage.png'; // 소스 경로를 설정합니다
이 스크립트가 실행되면 이미지가로드되기 시작합니다. DrawImage 문이 실행될 때로드가 완료되지 않으면 이미지가로드가 완료 될 때까지 스크립트가 중단됩니다. 이런 일이 일어나지 않으려면 Onload Event Handler를 사용하십시오.
스크립트가 실행되면 이미지가로드되기 시작합니다. 그림을 호출 할 때 그림이로드되지 않으면 스크립트가로드 될 때까지 대기합니다. 이것을 원하지 않으면 Onload 이벤트를 사용할 수 있습니다.
var img = new Image (); // 새 이미지 생성 ObjectImg.onload = function () {// groudImage 문을 실행} img.src = 'myimage.png'; // 소스 경로를 설정합니다하나의 외부 이미지 만 사용하는 경우 좋은 접근 방식 일 수 있지만 일단 하나 이상을 추적 해야하는 경우 더 교활한 것에 의지해야합니다. 이미지 사전로드 전술을 보는 것은이 튜토리얼의 범위를 벗어나지 만 완전한 솔루션은 JavaScript Image Preloader를 확인할 수 있습니다.
하나의 사진 만 사용하는 경우 충분합니다. 그러나 하나 이상의 이미지가 필요하면 더 복잡한 처리 방법이 필요하지만 이미지 사전로드 전략은이 튜토리얼의 범위를 벗어납니다. 관심이 있으시면 JavaScript Image Preloader를 참조하십시오.
이미지를 포함시키는 또 다른 방법은 데이터를 통한 것입니다 : URL. 데이터 URL을 사용하면 이미지를 Code에서 직접 Base64 인코딩 된 문자열로 완전히 정의 할 수 있습니다. 데이터 URL의 장점 중 하나는 결과 이미지를 서버로의 다른 왕복없이 즉시 사용할 수 있다는 것입니다. (또 다른 장점은 모든 CSS, JavaScript, HTML 및 이미지를 하나의 파일로 캡슐화하여 다른 위치에 더 휴대 할 수 있다는 것입니다.)이 방법의 일부 단점은 이미지가 캐시되지 않았으며 더 큰 이미지의 경우 ENCODED URL이 상당히 길어질 수 있다는 것입니다.
데이터 : URL 메소드를 통해 이미지를 참조 할 수도 있습니다. 데이터 URL은 그림을 Base64- 인코딩 된 문자열로 정의 할 수 있습니다. 장점은 이미지 컨텐츠를 서버를 다시 돌아 다닐 필요없이 즉시 사용할 수 있다는 것입니다. (또 다른 장점은 CSS, JavaScript, HTML 및 이미지를 함께 캡슐화 할 수 있다는 것입니다. 이는 마이그레이션에 매우 편리합니다.) 단점은 이미지를 캐시 할 수 없다는 것입니다. 이미지가 크면 내장 된 URL 데이터가 매우 길다.
var img_src = 'data : image/gif; base64, r0lgodlhcwalaaaaaaaaaa3pn/zih5baaaaaaaaalaaaaaaaaaaaaaaaaaaaiuha+hkcuo4lmnvindo7qyrixigbyaow ==';
소스 이미지 객체에 대한 참조가 있으면 DrawImage 메소드를 사용하여 캔버스로 렌더링 할 수 있습니다. 나중에 볼 수 있듯이 DrawImage 메소드는 과부하가 걸리고 세 가지 변형이 있습니다. 가장 기본적인 형태로 다음과 같이 보입니다.
소스 그래프 객체가 얻어지면 DrawImage 메소드를 사용하여 캔버스로 렌더링 할 수 있습니다. DrawImage 방법에는 세 가지 형태가 있으며 다음은 가장 기본적인 방법입니다.
DrawImage (image, x, y)여기서 이미지는 우리의 이미지 또는 캔버스 개체에 대한 참조입니다. x와 y 이미지를 배치 해야하는 대상 캔버스의 좌표를 형성합니다.
여기서 이미지는 이미지 또는 캔버스 객체이고 x와 y는 대상 캔버스에서 시작 좌표입니다.
다음 예에서는 작은 선 그래프의 배경으로 외부 이미지를 사용합니다. 배경을 사용하면 정교한 배경을 그릴 필요가 없기 때문에 스크립트가 상당히 작을 수 있습니다. 여기에서 하나의 이미지 만 사용하므로 이미지 개체의 Onload 이벤트 처리기를 사용하여 드로잉 문을 실행합니다. DrawImage 방법은 캔버스의 왼쪽 상단 인 좌표 (0,0)에 배경을 배치합니다.
다음 예에서는 외부 이미지를 선형 이미지의 배경으로 사용합니다. 배경 그림과 함께 책임있는 배경을 그릴 필요는 없으며 많은 코드를 저장할 필요가 없습니다. 여기에는 하나의 이미지 객체 만 사용되므로 ONLOAD 이벤트 응답 기능에서 드로우 작업이 트리거됩니다. DrawImage 메소드는 배경 이미지를 캔버스의 왼쪽 상단 코너 (0,0)에 배치합니다.
functiondraw () {
함수 draw () {var ctx = document.getElementById ( 'canvas'). getContext ( '2d'); var img = new Image (); img.onload = function () {ctx.drawimage (img, 0,0); ctx.beginpath (); Ctx.Moveto (30,96); Ctx.Lineto (70,66); Ctx.Lineto (103,76); Ctx.Lineto (170,15); ctx.stroke (); } img.src = 'images/backdrop.png'; }DrawImage 메소드의 두 번째 변형은 두 개의 새로운 매개 변수를 추가하고 캔버스에 스케일링 된 이미지를 배치 할 수 있습니다.
DrawImage 방법의 또 다른 변형은 캔버스에서 스케일링 할 이미지를 제어하기 위해 두 개의 매개 변수를 추가하는 것입니다.
DrawImage (이미지, x, y, 너비, 높이)여기서 너비와 높이는 대상 캔버스의 이미지 크기입니다.
이 예에서는 이미지를 벽지로 사용하여 캔버스에서 여러 번 반복합니다. 이것은 스케일링 된 이미지를 다른 위치에 반복하고 배치하여 간단하게 수행됩니다. 아래 코드 아래의 첫 번째 코드에서 행을 통한 루프의 첫 번째 코드는 열이 루프의 경우 두 번째입니다. 이미지는 원래 크기의 3 분의 1 인 50x38 픽셀로 확장됩니다. 이 튜토리얼의 뒷부분에서 사용자 정의 패턴을 만들어 어떻게이를 달성 할 수 있었는지 살펴 보겠습니다.
이 예에서는 이미지를 사용하여 배경과 같은 반복적 인 방식으로 캔버스로 펼쳐집니다. 구현하기가 매우 간단하고 확대 된 사진만으로 루프하십시오. 아래 코드를 참조하십시오. For Loop의 첫 번째 층은 행을 반복하는 것이고, 두 번째 층은 열을 반복하는 것입니다. 이미지 크기는 원래 50x38 px의 3 분의 1로 스케일링됩니다. 이 방법은 다음 자습서에서 볼 수 있듯이 배경 패턴의 효과를 잘 달성하는 데 사용될 수 있습니다.
참고 : 너무 많이 축소되면 스케일링되거나 거칠게 이미지가 흐려질 수 있습니다. 스케일링은 아마도 텍스트가 있다는 것이 읽기 쉬운 상태로 유지하는 것이 가장 좋을 것입니다.참고 : 대규모 스케일링으로 인해 이미지가 모호하거나 흐려질 수 있습니다. 이미지에 텍스트가있는 경우 스케일을 사용하지 않는 것이 가장 좋습니다. 처리 후 이미지의 텍스트가 인식 할 수 없을 가능성이 높습니다.
functiondraw () {
함수 draw () {var ctx = document.getElementById ( 'canvas'). getContext ( '2d'); var img = new Image (); img.onload = function () {for (i = 0; i <4; i ++) {for (j = 0; j <3; j ++) {ctx.drawimage (img, j*50, i*38,50,38); }}} img.src = 'images/rhino.jpg'; }DrawImage 방법의 세 번째 및 마지막 변형에는 8 개의 새로운 매개 변수가 있습니다. 이 방법을 사용하여 소스 이미지의 일부를 자르고 캔버스로 그릴 수 있습니다.
DrawImage 방법의 세 번째 및 마지막 변형에는 슬라이스 디스플레이를 제어하기위한 8 개의 새로운 매개 변수가 있습니다.
DrawImage (image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)다른 변형과 마찬가지로 첫 번째 매개 변수 이미지는 이미지 객체에 대한 참조 또는 다른 캔버스 요소에 대한 참조입니다. 다른 8 개의 매개 변수의 경우 오른쪽 이미지를 보는 것이 가장 좋습니다. 처음 4 개의 매개 변수는 소스 이미지의 슬라이스의 위치와 크기를 정의합니다. 마지막 네 매개 변수는 대상 캔버스의 위치와 크기를 정의합니다.
첫 번째 매개 변수는 다른 모수와 동일하며 둘 다 한 이미지 또는 다른 캔버스에 대한 참조입니다. 다른 8 개의 매개 변수는 오른쪽의 다이어그램을 가장 잘 참조합니다. 처음 4는 이미지 소스의 슬라이스 위치와 크기를 정의하고 마지막 4는 슬라이스의 대상 표시 위치와 크기를 정의합니다.
슬라이스는 작곡을 만들고 싶을 때 유용한 도구가 될 수 있습니다. 단일 이미지 파일에 모든 요소를 가질 수 있으며이 방법을 사용하여 전체 도면을 결합 할 수 있습니다. 예를 들어, 차트를 만들려면 단일 파일에 필요한 텍스트를 포함하는 PNG 이미지를 가질 수 있으며 데이터에 따라 많은 어려움없이 차트의 척도를 변경할 수 있습니다. 또 다른 장점은 모든 이미지를 개별적으로로드 할 필요가 없다는 것입니다.
슬라이스는 이미지 합성을위한 강력한 도구입니다. 모든 요소가 포함 된 이미지가 있다고 가정하면이 방법을 사용하여 완전한 이미지를 합성 할 수 있습니다. 예를 들어, 차트를 작성하고 필요한 모든 텍스트가 포함 된 PNG 파일을 사용하려면 실제 데이터 요구에 따라 최종 표시된 차트를 쉽게 변경할 수 있습니다. 이 방법의 또 다른 장점은 각 이미지를 별도로로드 할 필요가 없다는 것입니다.
이 예에서는 위에서 본 것과 같은 코뿔소를 사용할 것이지만 이제는 머리를 썰어 그림 프레임에 합성 할 것입니다. 그림 프레임의 이미지에는 24 비트 PNG 이미지로 저장된 드롭 셰이도가 포함됩니다. 24 비트 PNG 이미지에는 GIF 및 8 비트 PNG 이미지와 달리 전체 8 비트 알파 채널이 포함되어 있기 때문에 모든 배경에 배치 할 수 있으며 무광택 색상에 대해 걱정할 필요가 없습니다.
이 예에서는 위에서 사용한 코뿔소 이미지를 사용했지만 이번에는 Rhino 헤드의 슬라이스 클로즈업을 만들어 사진 프레임으로 합성했습니다. 프레임은 그림자 효과가 있으며 24 비트 PNG 형식으로 저장된 이미지입니다. 24 비트 PNG 이미지에는 GIF 및 8 비트 PNG와 달리 전체 8 비트 알파 채널이 제공되므로 기본 색상에 대해 걱정하지 않고 배경으로 배경으로 넣을 수 있습니다.
위의 예와는 이미지의 로딩에 대해 다른 접근 방식을 취했습니다. 방금 이미지를 HTML 문서에 직접 배치하고 CSS 규칙을 사용하여 시야에서 숨기기 위해 (표시 : 없음) 이미지를 숨 겼습니다. 두 이미지 모두를 쉽게 선택할 수 있도록 ID 속성을 할당했습니다. 스크립트 자체는 매우 간단합니다. 먼저 캔버스에 슬라이스되고 스케일링 된 이미지를 그린 다음 프레임을 맨 위에 놓습니다 (두 번째 DrawImage 문).
위에서 사용한 것과 다른 방식으로 이미지를로드하고 이미지를 HTML에 직접 삽입 한 다음 CSS를 통해 숨 깁니다 (디스플레이 : 없음). 나중에 사용하기에 편리한 두 이미지 모두에 대한 ID를 할당했습니다. 아래 스크립트를 보면 매우 간단합니다. 먼저, 코뿔소 머리 (첫 번째 DrawImage)를 자르고 캔버스에 넣은 다음 사진 프레임을 넣습니다 (두 번째 Drawimage).
함수 draw () {var canvas = document.getElementById ( 'canvas'); var ctx = canvas.getContext ( '2d'); // 슬라이스를 그리기 ctx.DrawImage (document.getElementById ( 'source'), 33,71,104,124,21,20,87,104); // 프레임 그리기 ctx.DrawImage (document.getElementById ( 'frame'), 0,0);}이 장의 마지막 예에서 나는 작은 아트 갤러리를 만들었습니다. 갤러리는 여러 이미지가 포함 된 테이블로 구성됩니다. 페이지가로드되면 페이지의 각 이미지마다 캔버스 요소가 삽입되고 프레임이 그 주위에 그려집니다.
제 경우에는 모든 이미지의 너비와 높이가 고정되어 있으며 주위에 그려진 프레임도 마찬가지입니다. 스크립트를 향상시켜 이미지의 너비와 높이를 사용하여 프레임을 주변에 완벽하게 맞출 수 있습니다.
아래 코드는 자명해야합니다. 우리는 이미지 배열을 반복하고 그에 따라 새로운 캔버스 요소를 추가합니다. 아마도 DOM에 익숙하지 않은 사람들에게 주목해야 할 것은 아마도 삽입 방법을 사용하는 것입니다. InsertBefore는 새 노드 (캔버스 요소)를 삽입하기 전에 요소 (이미지)의 부모 노드 (이미지)의 메소드입니다.