본문 바로가기

Canvas16

11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) 11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) 왜 픽셀에 기반한 이미지 가공이 필요할까요? 간단한 예를 하나 들면 특정 영역을 밝게 하거나 어둡게 할 경우 지금까지 설명한 방법들로는 불가능합니다. 일반적인 픽셀(pixel) 기반 이미지 가공의 과정을 간략히 도식화하면 다음과 같습니다. 위와 같은 작업을 할 수 있도록 drawing context는 픽셀(pixel) 단위로 이미지를 가공하여 반영하는데 사용할 수 있도록 다음과 같은 4 가지 메서드를 제공합니다. imagedata = context.createImageData(sw, sh); imagedata = context.createImageData(imagedata); imagedata = context.getImageDat.. 2013. 8. 7.
11. 이미지(Image) 11. 이미지(Image) 캔버스(canvas)내에서 이미지 작업은 크게 drawImage 메서드를 이용한 캔버스 내 이미지를 그리는 작업, 픽셀(pixel)에 기반한 이미지 가공 작업 및 방금 전 설명한 이미지의 회전, 축소 등과 같은 변환(Transformation) 등을 수행할 수 있습니다. 여기서는 drawImage 메서드를 이용해서 이미지를 캔버스에 그리는 방법과 기존 이미지를 이용하여 어떻게 이미지 픽셀을 추출하여 나타낼 수 있는지 소개하고 마지막으로 여러 개의 이미지를 이용한 슬라이드 쇼 기능을 구현하는 방법에 대해서 다루고자 합니다. 11.1 drawImage 메서드를 이용하여 이미지 그리기 캔버스(canvas)에 이미지를 그리기 위해서는 다음과 같은 3 가지 형태의 drawImage() .. 2013. 8. 7.
10. 변환(Transformation) 10. 변환(Transformation) 여러분은 캔버스(canvas)에 간단한 직선부터 사각형, 곡선 등과 같이 다양한 형태의 그리기 작업을 사용해보았습니다. 이번에는 이러한 그리기 작업에 조금 변화를 줄 수 있는 방법에 대해서 소개할 것인데 바로 변환(Transformation)입니다. 제공하는 메서드를 정리하면 다음과 같으며 순서대로 알아봅니다. context.scale(x, y) context.translate(x, y) context.rotate(angle) context.transform(a, b, c, d, e, f) context.setTransform(a, b, c, d, e, f) 10.1 scale(x, y) 메서드를 이용한 배율 조정 scale() 메서드는 입력 파라미터로 받는 x,.. 2013. 8. 7.
9. 캔버스(canvas) 내용을 이미지로 저장 9. 캔버스(canvas) 내용을 이미지로 저장 여러분들이 canvas 내에 그린 직선이나 사각형 같은 이미지들을 이미지 형태(기본 png 형태)로 저장하는 방법은 의외로 간단합니다. 다음과 같은 toDataURL() 메서드를 이용하여 이미지 객체를 이미지 데이터 URL로 설정할 수 있으며 브라우저를 통해 직접 이미지 데이터 URL을 열거나 이미지를 저장할 수 있습니다. canvas.toDataURL([type]) 위에서 입력 파라미터가 없이 사용할 경우 기본 타입은 “image/png”를 의미하게 됩니다. 입력 파라미터의 타입(type)으로 올 수 있는 형태는 “image/jpeg”, “imag/svg+xml”, “text/plain” 등이 올 수 있습니다. toDataURL() 메서드가 실행되면 반환.. 2013. 8. 7.

티스토리툴바