getimagedata sur photo
Posté : 09 avr. 2024, 16:21
bonjour
et merci de me permettre de rejoindre ce forum
je commence a programmer en javascript avec Visual studio code
mon problème viens de getimagedata
sur un Canvas je dessine des formes géométriques et avec getimagedata j'arrive a récupérer une portion
mais si c'est une photo ma capture est blanche
je joint mon code JS
voici mon code HTLM
je joint pas de photo remplacer "bitma.bmp"
merci d'avance de votre aide
et merci de me permettre de rejoindre ce forum
je commence a programmer en javascript avec Visual studio code
mon problème viens de getimagedata
sur un Canvas je dessine des formes géométriques et avec getimagedata j'arrive a récupérer une portion
mais si c'est une photo ma capture est blanche
je joint mon code JS
Code : Tout sélectionner
var canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 120,
imgH = 120;
var img_chat = document.createElement("img");
img_chat.onload = function() {
ctx.drawImage(img_chat, 4,4,100,100);
ctx.drawImage(canvas,160,4);
};
img_chat.src="bitma.bmp" ;
var data = new Uint8Array(imgW * imgH * 4);
crypto.getRandomValues(data);
var img = new ImageData(new Uint8ClampedArray(data.buffer), imgW, imgH);
ctx.putImageData(img, 0, 0);
ctx.fillStyle = "yellow";
ctx.fillRect(2,2,20,20);
function drawpixel(ctx) {
ctx.fillStyle = "blue";
ctx.fillRect(2,2,50,50);
var imgd = ctx.getImageData(4,4,70,70);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = pix[i ]; // red
pix[i+1] = pix[i+1]; // green
pix[i+2] = pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}
ctx.putImageData(imgd, 150, 300);
}
drawpixel(ctx);
Code : Tout sélectionner
<canvas id="myCanvas" width="550" height="510"></canvas>;
<script>
</script>
<input type="button" value="Cliquer ici pour lancer" onclick="drawpixel();"/>
<script src="script.js" defer></script>
<link href="style.css" rel="stylesheet">
merci d'avance de votre aide