प्राप्त करने के लिए व्यक्तिगत पिक्सल घटकों में से एक छवि, आप पहली बार आकर्षित करने के लिए कि छवि एक कैनवास:
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
: एक्स समन्वय के ऊपरी बाएं कोने की आयत से जो 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=" >
⚠️ नोट मैं का उपयोग कर रहा हूँ एक छोटे से डेटा यूआरआई से बचने के लिए Cross-Origin
मुद्दों अगर मैं शामिल एक बाहरी छवि या एक जवाब है कि तुलना में बड़ा है की अनुमति दी तो मैं कोशिश का उपयोग करने के लिए एक लंबे समय तक डेटा यूआरआई.