image processing in client side

Question

I need to fetch an image from a web site knowing it's URL and then edit it (cropping and resizing) in client side.
What the best way to do this using JavaScript, Jquery, HTML5?
can you provide some links or tutorials,...?
Thanks in advance.

Answer 1

You can use a Javascript Image Processing Framework like MarvinJ. The example below demonstrates how to resize and crop an image in js in the client side.

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(){
	imageOut = image.clone()
	image.draw(canvas1)
	
  // Crop
  Marvin.crop(image, imageOut, 50, 50, 100, 100);
  imageOut.draw(canvas2);
  
  // Scale
  Marvin.scale(image, imageOut, 100);
	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>