goker-dev / canvasresize Goto Github PK

Here is my use case:

• I have a png image roughly 2.7MB size
• I would like to reduce size client-size
• after drastic resize and compression it's still 1.1MB
• I believe it is still stored as .png
• image of the same size but with .jpeg extension after same resizing parameters is less than 100k.

Here are the available options: https://github.com/gokercebeci/canvasResize#options

Would introducing extension options be much work?

Happy 30 :)
Michal

chmod 777
Warning: imagejpeg() [function.imagejpeg]: Unable to open 'uploads/570c4c99f1b14.jpg

when i used to convert image
it have crop a lot of bottom. Check and plz fix it as soon as.

I have tried to resize transparent PNG images but they were cropped and then I converted those images to JPG and then tried to resize, but JPGs worked fine.

I have attached files for your reference, please check and revert if you can solve it.

I have been scratching my head for days as to why the jquery upload script you use won't work on latest Android devices that SHOULD be capable of doing so.

I will happily pay you for a modification that will work with progress updates on Android devices that can support it.

[email protected]

Hi,

It seems on resize the image quality becomes very poor, this is not a plugin specific issue but more of a canvas issue. Perhaps the following could somehow be included as a custom resampling quality similar to (http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas) in order to improve image quality when resized. I think it would be a great addition to an already great plugin!

//returns a function that calculates lanczos weight
function lanczosCreate(lobes){
return function(x){
if (x > lobes)
return 0;
x *= Math.PI;
if (Math.abs(x) < 1e-16)
return 1
var xx = x / lobes;
return Math.sin(x) * Math.sin(xx) / x / xx;
}
}

//elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius
function thumbnailer(elem, img, sx, lobes){
this.canvas = elem;
elem.width = img.width;
elem.height = img.height;
elem.style.display = "none";
this.ctx = elem.getContext("2d");
this.ctx.drawImage(img, 0, 0);
this.img = img;
this.src = this.ctx.getImageData(0, 0, img.width, img.height);
this.dest = {
width: sx,
height: Math.round(img.height * sx / img.width),
};
this.dest.data = new Array(this.dest.width * this.dest.height * 3);
this.lanczos = lanczosCreate(lobes);
this.ratio = img.width / sx;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
setTimeout(this.process1, 0, this, 0);
}

thumbnailer.prototype.process1 = function(self, u){
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < self.dest.height; v++) {
self.center.y = (v + 0.5) * self.ratio;
self.icenter.y = Math.floor(self.center.y);
var a, r, g, b;
a = r = g = b = 0;
for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {
if (i < 0 || i >= self.src.width)
continue;
var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
if (!self.cacheLanc[f_x])
self.cacheLanc[f_x] = {};
for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {
if (j < 0 || j >= self.src.height)
continue;
var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
if (self.cacheLanc[f_x][f_y] == undefined)
self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2) + Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
weight = self.cacheLanc[f_x][f_y];
if (weight > 0) {
var idx = (j * self.src.width + i) * 4;
a += weight;
r += weight * self.src.data[idx];
g += weight * self.src.data[idx + 1];
b += weight * self.src.data[idx + 2];
}
}
}
var idx = (v * self.dest.width + u) * 3;
self.dest.data[idx] = r / a;
self.dest.data[idx + 1] = g / a;
self.dest.data[idx + 2] = b / a;
}

if (++u < self.dest.width) 
    setTimeout(self.process1, 0, self, u);
else 
    setTimeout(self.process2, 0, self);

};
thumbnailer.prototype.process2 = function(self){
self.canvas.width = self.dest.width;
self.canvas.height = self.dest.height;
self.ctx.drawImage(self.img, 0, 0);
self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
var idx, idx2;
for (var i = 0; i < self.dest.width; i++) {
for (var j = 0; j < self.dest.height; j++) {
idx = (j * self.dest.width + i) * 3;
idx2 = (j * self.dest.width + i) * 4;
self.src.data[idx2] = self.dest.data[idx];
self.src.data[idx2 + 1] = self.dest.data[idx + 1];
self.src.data[idx2 + 2] = self.dest.data[idx + 2];
}
}
self.ctx.putImageData(self.src, 0, 0);
self.canvas.style.display = "block";
}

/==============================================================/
img.onload = function() {
var canvas = document.createElement("canvas");
new thumbnailer(canvas, img, 188, 3); //this produces lanczos3
//but feel free to raise it up to 8. Your client will appreciate
//that the program makes full use of his machine.
document.body.appendChild(canvas);
}

Best Regards

When I am using this code:

var resizedImage = canvasResize("dataURLtoBlob", myImage);

In some cases , the blob type is changing to "application/octet-stream" from "image/jpeg" or "image/png". We observed that we are also having the image size as 0 in those cases.

Please help.

Regards,
Sayan

Why canvas resize doesn't works on iOS 8 ?

Big images (straight from the camera on certain Apple devices) are reported to be incompletely processed by canvasResize, and memory exhaustion is suspected to be the culprit.

Looking at the code, I see it basically delegates the bulk of the work to HTML canvas drawImage(), which is a good idea (performance-wise -- quality is another matter).
As a side effect, images smaller than 1024x1024 get exactly one call to drawImage() (plus the value added of all your code -- workaround bugs, etc).

In a search for ways to reduce memory consumption, I'm considering reducing tile size (currently set by var d = 1024 in source) to e.g. 512. It would mean 4 times more calls to drawImage(), which should not be a problem, but a 4 times smaller tmpCanvas (256kpixels instead of 1Mpixel), hence reduced memory consumption.

1. What do you think about this attempts to reduce memory consumption ?
2. Is the value d=1024 carefully selected with reasons to keep it that way (e.g. browsers known to optimize algorithms for this size) or not ?

The HTML 5 File API is not supported until Android 3.0 + (http://caniuse.com/filereader) so this plugin doesn't seem to be compatible with Android 2.3 as stated.

I was trying to use this plugin in an Android 2.3 phonegap application but "FileReader" is not available.

Also tested the following:

if (window.FileReader) {
console.log("FileReader Supported");
} else {
//This fires in Android 2.3 webview
console.log("FileReader NOT SUPPORTED");
}

It is possible to show a small thumbnail but to save a bigger image to server?
and choose a max size for the bigger image?

I'm not sure exactly what conditions cause this, but certain GIFs are cropped or stretched oddly. You can see the behavior using https://gokercebeci.com/dev/canvasresize

This image is handled correctly:

This image is cropped to the top-left quadrant:

And this image has the bottom half cropped off, then stretched vertically to fill the space:

Currently, when you re-size a .png file with transparent background, your plugin will change the transparency to black (because of toDataURL("image/jpeg")). Sometimes it is OK, but only when you don't have something black on transparent background.

In this picture http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png you will loose black text.

I suggest when the input file is .png then the result will by encoded as image/.png.

Something like this:
// TO DO: image/png detecting issue
if (file.type === "image/png") {
var data = newcanvas.toDataURL(file.type);
} else {
var data = newcanvas.toDataURL("image/jpeg", ($this.options.quality * .01));
}

The best solution is that output image will be the same type as input image (.jpeg, .png,...).

is possible to make this upload more than one image at a time?

The plug-in works perfectly with .jpg extension files but I cannot manage to have it work with .png files.
The only thing I have is a black image the size of the uploaded one and the says data:image/jpeg;base64. (....)

I noticed that when I downscale a .png image sometimes the new image is larger than the original. Does this plugin support compression for .png images?

Thanks for this excellent code!

It works great, but on BlackBerry 10 the tiling of the canvas seems to fail on both landscape and portrait mode. Tiling is probably not needed at all. I've added an option to disable it and draw the image immediately to the canvas and that works.

Maybe you could detect iOS and skip the tiling code otherwise.

On BlackBerry 10 it also detected a vertical squash on portrait images but drawing straight to canvas did not cause any visible errors.

Keep up the good work!

In April 2020, chrome and other modern browsers released a feature to enable image-orientation. Basically what this does is uses the photo's exif orientation, when present in an image, and orient the image on the html canvas to it’s correct rotation, therefore the function to rotate is rendered useless (because this browser feature is drawing the image canvas on its terms).

After image re sized, it's quality is low if we compare to same size image that display with .
How to fix this problem?

Similar problem : http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas

Let me start by saying thank you! This saved me a ton of time and made my project much more efficient! Now to the said issue...

Setting crop 'true' doesn't actually crop an image. This may be by design and just a bad choice of verbage.

One would assume that uploading a 1024x760 image and setting the options to:

...
width: 300,
height: 300,
crop: true,
...

would result in an image that was 300x300 where the short side fills the whole image and the excess of the long edge is "cropped" off (usually image is centered and excess is cut from either side).

Instead it seems setting the crop option to true just tells it to make the shortest side that length.

Is this by design or a defect?

Hi

In the following docs the 6 orientation means rotate left and 8 means rotate right
http://sylvana.net/jpegcrop/exif_orientation.html
http://www.impulseadventure.com/photo/exif-orientation.html

In canvasResize it's the opposite.

Am I missing something or is this a bug?

6 - 90 rotate right
https://github.com/gokercebeci/canvasResize/blob/master/canvasResize.js#L125

8 - 90 rotate left
https://github.com/gokercebeci/canvasResize/blob/master/canvasResize.js#L136

In case 6 the context is translated by -height and in case 8 by -width. Shouldn't the rotate left case translate by width instead?

Thanks

How to fix

error callback function is not provided, the callback is not being called when the image is fake, or no return error from $.canvasResize instance.

I use canvasResize with jQuery Mobile 1.4 RC1 and it's ok and works perfectly.
But when I change rc1 to 1.4 (release), it couldn't work.

I compared jquery mobile 1.4 rc1 and 1.4 release and found nothing strange.

Could you please try jQuery Mobile 1.4 to test whether it's ok or not. Thanks a lot.

Hi
I have installed canvasResize on my own server an performed some tests. I have a WordPress project that uses front end uploading of images based on the code in this post:
http://madebyraygun.com/blog/2012/upload-and-attach-multiple-images-from-the-wordpress-front-end/
But i only upload one image at the time.
Demo here:
http://twoway.hemsida.eu/wp1/front-end-image-upload/

In most cases the photos is taken with a mobile device like iPad/iPhone and the upload time is quite long on a 3G connection.

I tested canvasResize on my own server and orginal image is around 1.5 MB and if i use canvasResize with 1024px and 100% quality the upload is reduced to around 800 kb.

My goal is to implement canvasResize in my WordPress project and my question is if thar would work? Do you (Goker) now if it has been done? Doo you have any tips that could help me?