przetwarzanie obrazu po stronie klienta

Question

Potrzebuję pobrać obraz ze strony internetowej, wiedząc, że to adres URL, a następnie go edytować (przycinanie i zmiana rozmiaru) po stronie klienta.
Jaki jest najlepszy sposób na to, używając JavaScript, Jquery, HTML5?
czy możesz podać linki lub samouczki, ...?
Z góry dziękuję.

Answer 1

Można użyć JavaScript Processing Framework, jak MarvinJ. Poniższy przykład pokazuje, jak zmienić rozmiar i przyciąć obraz w js po stronie klienta.

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

Wystąpił problem z zabezpieczeniem, który wyłącza pobieranie pikseli z innej domeny. Ale aby wykonać tylko podstawowe transformacje, takie jak obrót/zmiana rozmiaru/kadrowanie, można użyć api kontekstu 2d, aby narysować obraz w obszarze roboczym. Zobacz, jak korzystać z interfejsu API 2d.