5

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.

Aboelnour
  • 1,423
  • 3
  • 17
  • 39
  • possible duplicate of [Client-side image processing](http://stackoverflow.com/questions/2174504/client-side-image-processing) – Mat Jul 17 '11 at 11:33
  • @Mat: That's mainly looking at Flash/.Net rather than javascript/etc. Revelvant, but not a dupe. – Callum Rogers Jul 17 '11 at 11:42

2 Answers2

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>
Gabriel Archanjo
  • 4,547
  • 2
  • 34
  • 41
0

There is an security issue that disables get pixeldata from another domain. But to only do basic transformations such as rotate/resize/cropping you can use the 2d-context api to draw the image in a canvas. See this article for how to use 2d-context api.

Rickard
  • 678
  • 5
  • 14