From 0b7b67ad04d3549a488df1ab01e6db66783623c7 Mon Sep 17 00:00:00 2001 From: Christian Ramseier Date: Mon, 24 Feb 2014 22:11:23 +0100 Subject: [PATCH] added stepwise image downsampling to improve the resulting image quality --- public/javascripts/imageupload.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c3c1453..cf15886 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -27,8 +27,10 @@ angular.module('imageupload', []) var canvas = getResizeArea(); - var height = origImage.height; - var width = origImage.width; + var oheight = origImage.height; + var owidth = origImage.width; + var height = oheight; + var width = owidth; // calculate the width and height, constraining the proportions if (width > height) { @@ -43,12 +45,27 @@ angular.module('imageupload', []) } } + var img = origImage; + // introduce downsampling steps if appropriate + if(oheight / height > 2) { + img = document.createElement('canvas'); + var tctx = img.getContext("2d"); + img.width = owidth; + img.height = oheight; + tctx.drawImage(origImage, 0, 0, owidth, oheight, 0, 0, owidth/2, oheight/2); + oheight /= 2; owidth /= 2; + while(oheight / height > 2) { + tctx.drawImage(img, 0, 0, owidth, oheight, 0, 0, owidth/2, oheight/2); + oheight /= 2; owidth /= 2; + } + } + canvas.width = width; canvas.height = height; //draw image on canvas var ctx = canvas.getContext("2d"); - ctx.drawImage(origImage, 0, 0, width, height); + ctx.drawImage(img, 0, 0, owidth, oheight, 0, 0, width, height); // get the data from canvas as 70% jpg (or specified type). return canvas.toDataURL(type, quality);