getimagedata sur photo

Message par **webmaster** » 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

valentin · Message par **valentin** » 11 avr. 2024, 11:43

bonjour
je joint rapport erreur de chrome

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)

pourtant mon image est locale donc doit pas avoir procédure sécurité
tous sa me dépasse pourtant je commence a aimer javascript mais la je sent que je vais retourné sur Delphi

Message par **webmaster** » 11 avr. 2024, 13:04

Ok, cette erreur signifie qu'il faut obligatoirement passer par un serveur web http
Lancer le .html depuis le disque dur bloque la gestion de canva

valentin · Message par **valentin** » 11 avr. 2024, 13:21

bonjour
c'est pour sa quand je lance votre programme de votre serveur sa marche et le même en locale bloque

peut t'on faire une application locale sans être sur un serveur ?
merci

Message par **webmaster** » 11 avr. 2024, 13:41

Il y a de plus en plus de fonctionnalités qui sont bloquées par les navigateurs sans serveur web

La création d'un serveur local est expliquée dans mon livre
Le script est disponible ici
https://www.toutjavascript.com/livre/webserverfull.php

valentin · Message par **valentin** » 11 avr. 2024, 15:31

bonjour et encore merci de prendre mon cas en patience
par contre y as t'il un moyen de contourner getimagedata
je vais travailler que sur des Bitmaps
peut ton faire une imagedata sur le Bitmap et ensuite envoyer avec Putimage
ou une fonction pour recuperer les pixels de ce Bitmap

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);

en Delphi je récupère mes pixels par Color:=Bitmap. Canvas. Pixel[x,y];

valentin · Message par **valentin** » 11 avr. 2024, 16:58

bonjour
j'ai résolu mon problème erreur Getimagedata
en mettant image source un fichier transformé en base64
(par contre j'ai dut aller sur un site' convert png to base64' pour le faire
existe t'il un programme pour le faire sans avoir recourt a ce site)

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';

le problème maintenant comment mettre un fichier de grande taille en base64 en dehors du Html
exemple: charger load(fichierbas64) et le mettre dans un data.buffer

valentin · Message par **valentin** » 11 avr. 2024, 20:58

bonsoir
voici ma solution pour erreur Getimagedata
j'ai créer un fichier du fichier image *.png en base 64 avec
un programme que j'ai modifier en Delphi qui converti un "PNG en Base64 "
on va l'appeler "base64.png"
fichier joint base64.png
J'ai mis *.png car votre site n'accepte pas les fichiers texte

mon HTML

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>

mon programme JS

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;

}

valentin · Message par **valentin** » 11 avr. 2024, 21:05

bonsoir
je ne vois pas le fichier joint "base64.png"
je ne sais pas comment le joindre
22 ko peut être trop volumineux

autrement charger sur la toile un fichier en base64
merci

Message par **webmaster** » 12 avr. 2024, 09:12

Pour joindre un fichier il faut utiliser l'onglet sous la zone de saisie :

: Capture d’écran 2024-04-12 à 09.09.22.png (85.36 Kio) Vu 4283 fois

Forums Tout JavaScript

getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo

Re: getimagedata sur photo