0

I wrote a module where you can perform image manipulation. There is also always a preview of different filters and so on.

The prolbem is that it should all pictures fast. There also can be a picture with like 3000 x 3000 pixels. For the previews that would take too much time.

Is there a way to resize the pictures to for example 200 x 200? I mean a real resizing of the image.

Mulgard
  • 9,877
  • 34
  • 129
  • 232
  • To resize them where? – zerkms Aug 30 '15 at 07:23
  • "Is there a way to resize the pictures to for example 200 x 200?" - yes, but this algorithm is not fast for the big images. Bicubic interpolation is used quite often. And you'll have to do it on server - javascript can't manipulate files. – user4035 Aug 30 '15 at 07:25
  • [This may help](http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas) – Jashwant Aug 30 '15 at 07:26
  • i dont really need to manipulate the file. i load the file. i resize the image and i dont need to save it. i just need to present it. – Mulgard Aug 30 '15 at 07:27

1 Answers1

1

You can resize images in JavaScript using canvas. The image must be hosted on same domain as your domain.

First you draw the image on the canvas you createing. You can set the width&height

document.getElementByTagName('canvas')[0].getContext(2d).drawImage....

After that you can restore the image from canva to your image tag.

document.getElementByTagName('img')[0].src=    document.getElementByTagName('canvas')[0].toDataUrl()

You can see this example: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/

Aminadav Glickshtein
  • 23,232
  • 12
  • 77
  • 117