9. canvas 지원여부 확인하기
오래된 브라우저(원수같은 IE8이라든가…)에서는 canvas를 지원하지 않을 수 있습니다.
상세한 사항은 http://caniuse.com/#search=canvas 여기에서 확인하고 사용해주세요.
!
!
canvas를 지원하지 않을 경우 대신 보여줄 내용을 써주세요
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage 의
fallback content를 참조해주세요.
!
!
CSS는 canvas의 width/height를 바꿀 수 있지만,
imageData는 바꿀 수 없습니다
canvas에서는 안에 있는 모든 픽셀에 대한 데이터를 조작할 수 있습니다. 이 데이터는 1차원 array로 가져오며,
array의 크기는 CSS에 지정되어 있는 크기가 아니라 canvas엘리먼트의 속성으로 지정되어 있는 width/height
를 기준으로 만들어집니다.
troubleshooting
15. context.drawImage( img, x, y );
context.drawImage( img, x, y, width, height );
//그냥 그려!
//줄이거나 늘리거나
http://codepen.io/fairesy/pen/oXbOey?editors=101
16. ERROR! Canvas tainted by cross origin data
!
이미지 src를 웹주소 링크나 같은 서버 내에서 가져오는 것이 아니라,
<img>태그에서 가져오거나 로컬경로를 그대로 쓰는 경우 canvas에
서 이루어지는 조작들이 불가능합니다. 무려 SecurityError.
!
!
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
troubleshooting
20. //이미지 데이터에서 우리가 실제로 만지작거릴 수 있는 픽셀들을 뽑아옵니다.
var pixelData = imageData.data;
var numPixels = imageData.width * imageData.height;
//이미지를 구성하고 있는 픽셀의 총 개수
21. var pixelData의 속사정은 이래요,
r g b a r g b a r g b …
1번째 픽셀의 색상정보
2번째 픽셀의 색상정보
= 1차원 array!
30. invert
R = 255 - r;
G = 255 - g;
B = 255 - b;
grayscale
gray = (r + g + b) / 3
R = G = B = gray;
31. sepia
R = r * 0.393 + g * 0.769 + b * 0.189;
G = r * 0.349 + g * 0.686 + b * 0.168;
B = r * 0.272 + g * 0.534 + b * 0.131;
32. lighten / darken
R = offset * r;
G = offset * g;
B = offset * b;
R = r + offset;
G = g + offset;
B = b + offset;
OR
0 < offset < 1 : darken
1 < offset : lighten