Traitement d'image côté client

Question

J'ai besoin d'extraire une image d'un site Web en sachant qu'il s'agit d'une URL, puis de la modifier (recadrage et redimensionnement) côté client.
Quelle est la meilleure façon de le faire en utilisant JavaScript, Jquery, HTML5?
pouvez-vous fournir des liens ou des tutoriels, ...?
Merci d'avance.

Answer 1

Vous pouvez utiliser un framework de traitement d'image Javascript tel que MarvinJ. L'exemple ci-dessous montre comment redimensionner et recadrer une image dans js du côté client.

var canvas1 = document.getElementById("canvas1"); 
 
var canvas2 = document.getElementById("canvas2"); 
 
var canvas3 = document.getElementById("canvas3"); 
 

 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded); 
 

 

 
function imageLoaded(){ 
 
\t imageOut = image.clone() 
 
\t image.draw(canvas1) 
 
\t 
 
    // Crop 
 
    Marvin.crop(image, imageOut, 50, 50, 100, 100); 
 
    imageOut.draw(canvas2); 
 
    
 
    // Scale 
 
    Marvin.scale(image, imageOut, 100); 
 
\t imageOut.draw(canvas3); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas1" width="200" height="200"></canvas> 
 
<canvas id="canvas2" width="200" height="200"></canvas><br/> 
 
<canvas id="canvas3" width="200" height="200"></canvas>

Answer 2

Il existe un problème de sécurité qui désactive la commande get pixeldata d'un autre domaine. Mais pour effectuer uniquement des transformations de base telles que la rotation/redimensionnement/recadrage, vous pouvez utiliser l'API 2d-context pour dessiner l'image dans un canevas. Voir this article pour savoir comment utiliser l'API 2d-context.