Re: getimagedata sur photo
Posté : 11 avr. 2024, 09:30
Il y a sans doute une erreur JS quelque part
Il faut ouvrir la console du navigateur pour en savoir plus
Il faut ouvrir la console du navigateur pour en savoir plus
Les nouveaux forums de Tout JavaScript.com
https://www.toutjavascript.com/forum/
https://www.toutjavascript.com/forum/viewtopic.php?f=1&t=3813
pourtant mon image est locale donc doit pas avoir procédure sécuritéscript.js:42 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D':
The canvas has been tainted by cross-origin data.
at drawpixel (file:///D:/dessin/plume2/script.js:42:16)
at HTMLInputElement.onclick (file:///D:/dessin/plume2/index.html:13:81)
Code : Tout sélectionner
var data = new Uint8Array(imgW * imgH * 4);
data= mes pixels du bitmap
var img = new ImageData(new Uint8ClampedArray(data.buffer), imgW, imgH);
ctx.putImageData(img, 0, 0);
Code : Tout sélectionner
<input type="button" value="Cliquer ici pour lancer" onclick="drawpixel();"/>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 120,
imgH = 120;
var gW = 120;
var gH = 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='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAACTBAMAAAAXemoLAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAD1BMVEXb7unqpKoAh2P////OKTly1jHoAAAAAnRSTlPHx/co26IAAAABYktHRAMRDEzyAAAAB3RJTUUH5gIVBBAugNMRsAAAAF1JREFUaN7tzUENADAIBDBETMCChVnAv6ZZuDdpDbQ6cF/gTKB0Op1Op9PpdDqdTqfT6XQ6nU6n0+l0Op1Op9PpdDqdTqfT6XQ6nU6n0+l0Op1Op9PpdDqdTqdb132lLnldO0pmPgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMi0yMVQwNDoxNjo0NiswMDowMMefVgQAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDItMjFUMDQ6MTY6NDYrMDA6MDC2wu64AAAAAElFTkSuQmCC';
Code : Tout sélectionner
<canvas id="myCanvas" width="550" height="510"></canvas>;
<input type="button" value="Cliquer ici pour lancer" onclick="drawpixel();"/>
<input type="file" onchange="readFile(this)">
<body>
<script src="script.js" defer></script>
<script>
let ligne='';
function readFile(input) {
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file,"UTF-8");
reader.onload = function() {
console.log(reader.result);
ligne=reader.result;
loadpixel()
};
reader.onerror = function() {
console.log(reader.error);
};
}
</script>
</body>
Code : Tout sélectionner
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 120,
imgH = 120;
var gW = 120;
var gH = 120;
function drawpixel() {
ctx.fillStyle = "blue";
ctx.fillRect(2,2,50,50);
var imgd = ctx.getImageData(4,4,gW,gH);
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);
}
function loadpixel() {
var img_chat = document.createElement("img");
img_chat.onload = function() {
ctx.drawImage(img_chat, 4,4,100,100);
};
img_chat.src = ligne;
}