0

I read an image using the FileReader API, then I store the image as a blob in Indexeddb for later synchronization with a server. Until then I want to display a thumbnail of the image. It seems suboptimal to add the image ie. to a canvas element in full resolution and then resize it. It seems a better solution would be to resize it before adding it.

After synchronization I want to delete the full resolution image and only show the thumbnail. (My main concern is storage limits in a web app, on a mobile device)

Is it possible? and how?

Bildsoe
  • 1,310
  • 6
  • 31
  • 44
  • Your question might already have and answer here http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload – TeaCoder Apr 20 '17 at 20:39
  • 2
    Your client will have already 'loaded' the images at the res/size they were served. You could do some CSS/JS cropping techniques, but keep in mind the bandwidth was already used loading them. The only way to 'serve' them cropped would be implement a server side rescaler. – NSTuttle Apr 20 '17 at 20:41
  • @Illdapt you're right since it is already loaded the data is transfered and the bandwidth used. But still after sync with the server I want to delete the full resolution image and show a thumbnail only. I'm worried about flickering, if I resize it, after adding it to the DOM. Also I updated the question. – Bildsoe Apr 20 '17 at 20:48

1 Answers1

0

Do not worry about adding extra stuff to the DOM, just do not do anything that will render it.

assuming you start with something along the lines of -

var reader = new FileReader();
reader.onload = function (e) 
    {
    var img    = new Image ;
    img.src    = e.target.result;
    img.onload = function ()

then inside this onload function you can...

var canvas = document.createElement("canvas"); var context = canvas.getContext ("2d");

//draw it at any resolution you want

context.drawImage (this, 0, 0, width, height);

// read it back from the canvas, compressing if you want to

var saveData = canvas.toDataURL("image/jpeg",0.7);

// and save it where you want // delete the canvas element unless you want to keep doing this regularly

Steve Brooker
  • 1,043
  • 11
  • 28