procesamiento de imágenes en el lado del cliente

Question

Necesito obtener una imagen de un sitio web sabiendo que es una URL y luego editarla (recortar y redimensionar) en el lado del cliente.
¿Cuál es la mejor manera de hacerlo con JavaScript, Jquery, HTML5?
puede proporcionar algunos enlaces o tutoriales, ...?
Gracias de antemano.

Answer 1

Puede utilizar un marco de procesamiento de imágenes de Javascript como MarvinJ. El siguiente ejemplo muestra cómo cambiar el tamaño y recortar una imagen en js en el lado del cliente.

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

Hay un problema de seguridad que deshabilita la obtención de píxeles de otro dominio. Pero para hacer transformaciones básicas como rotar/redimensionar/recortar, puede usar la api 2d-context para dibujar la imagen en un lienzo. Consulte this article para saber cómo usar la API 2d-context.