을 얻은 개별 픽셀에서 구성 요소 이미지,당신이 먼저 그리는 이미지를 캔버스:
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;
canvas.width = width;
canvas.height = height;
// Draw original image:
context.drawImage(image, 0, 0, width, height);
그런 다음 값을 픽셀 당신 업데이트:
const data = context.getImageData(0, 0, width, height).data;
참고 모양과 형태의 반환되는 데이터 CanvasRenderingContext2D.getImageData()
기능:
ImageData ctx.getImageData(sx, sy, sw, sh);
sx
:X 좌표의 왼쪽 상단 모서리의 직사각형에서는 ImageData 추출됩니다.
sy
:의 y 좌표 왼쪽 상단 모서리의 직사각형에서는 ImageData 추출됩니다.
sw
:사각형의 너비는 ImageData 추출됩니다.
sh
:사각형의 높이에서는 ImageData 추출됩니다.
당신이 볼 수있는 그것을 반환합니다 ImageData
체, 어떤 것입니다. 여기서 중요한 부분에는 해당 개체는 .data
속성을 포함하는 우리의 모든 픽셀값입니다.
그러나 참고 .data
숙박 시설은 1-치수 Uint8ClampedArray
즉,모든 픽셀의 구성 요소를 평평하게,그래서 당신이 무언가를 얻는 다음과 같습니다.
이 있다고 가정해 봅시 2x2 이미지 다음과 같다:
RED PIXEL | GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL
그 후,당신은 당신을 얻을 것이 그들을 다음과 같다:
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 0, 0, 0, 0 ]
| RED PIXEL | GREEN PIXEL | BLUE PIXEL | TRANSPAERENT PIXEL |
| 1ST PIXEL | 2ND PIXEL | 3RD PIXEL | 4TH PIXEL |
할 수 있습니다 다음 변환 이러한 값은 당신이 좋아하는 것 그러나,그리고 특정 사용하는 경우,그 것은 당신이해야 할 모든 프론트 엔드에 보내기 전에 변환 데이터 서버
const transformedData = encryptedDecryptedImage(data);
fetch('httsp://', { ... });
하려는 경우 그 변환 데이터 페이지에서 당신이 다시 변환하 ImageData
용 CanvasRenderingContext2D.createImageData()
고 CanvasRenderingContext2D.putImageData()
:
const imageData = context.createImageData(width, height);
imageData.data.set(new Uint8ClampedArray(transformedData));
context.putImageData(transformedData, 0, 0);
동작하는 예제:
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;
canvas.width = width;
canvas.height = height;
// Draw original image:
context.drawImage(image, 0, 0, width, height);
// Transform the top half of the image (each pixel has 4 coordinates, RGB and alpha):
const maxTransformedCoords = width * Math.round(height / 2) * 4;
// Avoid processing more than needed:
const requiredRows = Math.ceil(maxTransformedCoords / (width * 4));
// Get the pixel component values as an array:
const data = context.getImageData(0, 0, width, requiredRows).data;
// Your transform logic (with some changes):
const key = 48;
let count = 0;
const transformedData = data.map((value, i) => {
if (++count > maxTransformedCoords) return value;
// Turn alpha coordinates opaque:
// if ((i + 1) % 4 === 0) return 255;
// Your logic:
return value ** key;
});
// Turn the transformed data into an ImageData object:
const imageData = context.createImageData(width, requiredRows);
imageData.data.set(new Uint8ClampedArray(transformedData));
// Draw the transformed pixels:
context.putImageData(imageData, 0, 0);
// Display it on the page:
canvas.id = 'canvas';
document.body.append(canvas);
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-family: monospace;
overflow: hidden;
}
#image,
#canvas {
border: 4px solid white;
border-radius: 2px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, .25);
width: 150px;
box-sizing: border-box;
display: block;
background: cyan;
}
#canvas {
margin-left: 32px;
}
<img id="image" src="data:image/gif;base64,R0lGODlhSwBLAPEAACMfIO0cJAAAAAAAACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIf4jUmVzaXplZCBvbiBodHRwczovL2V6Z2lmLmNvbS9yZXNpemUAIfkEBQAAAgAsAAAAAEsASwAAAv+Uj6mb4A+QY7TaKxvch+MPKpC0eeUUptdomOzJqnLUvnFcl7J6Pzn9I+l2IdfII8DZiCnYsYdK4qRTptAZwQKRVK71CusOgx2nFRrlhMu+33o2NEalC6S9zQvfi3Mlnm9WxeQ396F2+HcQsMjYGEBRVbhy5yOp6OgIeVIHpEnZyYCZ6cklKBJX+Kgg2riqKoayOWl2+VrLmtDqBptIOjZ6K4qAeSrL8PcmHExsgMs2dpyIxPpKvdhM/YxaTMW2PGr9GP76BN3VHTMurh7eoU14jsc+P845Vn6OTb/P/I68iYOfwGv+JOmRNHBfsV5ujA1LqM4eKDoNvXyDqItTxYX/DC9irKBlIhkKGPtFw1JDiMeS7CqWqySPZcKGHH/JHGgIpb6bCl1O0LmT57yCOqoI5UcU0YKjPXmFjMm0ZQ4NIVdGBdZRi9WrjLxJNMY1Yr4dYeuNxWApl1ALHb+KDHrTV1owlriedJgSr4Cybu/9dFiWYAagsqAGVkkzaZTAuqD9ywKWMUG9dCO3u2zWpVzIhpW122utZlrHnTN+Bq2Mqrlnqh8CQ+0Mrq3Kc++q7eo6dlB3rLuh3abPVbbbI2mxBdhWdsZhid8cr0oy9F08q0k5FXSadiyL1mF5z51a8VsQOp3/LlodkBfzmzWf2bOrtfzr48k/1hupDaLa9rUbO+zlwndfaOCURAXRNaCBqBT2BncJakWfTzSYkmCEFr60RX0V8sKaHOltCBJ1tAAFYhHaVVbig3jxp0IBADs=" >
⚠은 스승의 주요 작은 데이터 URI 을 피 Cross-Origin
문제면 나는 포함되는 외부 이미지나 대답하는 보다 큰 허용되는 경우를 사용하려고 하는 이상 데이터를 입력합니다.