stomita / ios-imagefile-megapixel Goto Github PK

In some use cases, it might be necessary to pass an existing canvas element as image to resize to the library, e.g. when it is necessary to do multiple successive scaling iterations.

The first issue with this is the usage of the naturalWidth and naturalHeight properties in the library functions, which can be worked around by using img.naturalWidth || img.width and img.naturalHeight || img.height respectively.

However even with these adjustments the second scaling iteration didn't work and simply returned a blank canvas.

Any idea on what might be necessary to extend the library to allow scaling of existing canvas elements?

It seems like detectVerticalSquash is setting a non-1 ratio on png files, when it should probably leave them at 1. Gif files may also have this problem, but I did not test.

Does not work properly with iOS7 front camera for me, ratio is a bit different.

Hi @stomita,

first thanks for your library, it's the first solution I've found that actually works around the canvas scaling issues on iOS devices.

However, since it uses the alpha channel to detect the iOS scaling bugs, there are rendering problems with images which do have an alpha channel, e.g. PNG or GIF images.

Any idea how to improve the detection to avoid this issue?

I've referenced your library in an issue on my own image loading script:
blueimp/JavaScript-Load-Image#13

Since I'm not really using ios-imagefile-megapixel anymore these days I haven't been able to devote much attention to this project. I would really love to find a new maintainer to take over responsibility for this project.

Anyone up for the challenge?

I am reading in an image file using
var mpImg = new MegaPixImage(file);

and then rendering the image to an tag using
var resImg = document.getElementById('testDummy');
mpImg.render(resImg, { maxWidth: 1000, maxHeight: 1000, quality: 1.0 });

Once the image is rendered to the "testDummy" image I am attempting to get the width and height of the image using
var w = $('#testDummy').width();
var h = $('#testDummy').height();

Unfortunately the height and width are 0 the first time I attempt to get the image, and the previous image size each subsequent time. I'm guessing there is some delay in the render function and I am attempting to get the value before the render is complete. Is there a way to get the rendered size once the image render is complete.

thanks.

it can work correctyly on chrome emulator,but can't load img on mobile device.
my code like this:

var myPreview=document.getElementById("previewImg");
  var img = new Image();
                        img.tagName="img";
                        mega=new MegaPixImage(this.files[0]);
                        mega.render(img,{ maxWidth: 1024, maxHeight: 1024,quality:1 },function(){
                          myPreview.src=img.src
                        })

Hi,

I seem to be having some issues with the orientation of the image after taking a picture. I saw your reply to Andre Fiedler on stackoverflow (http://stackoverflow.com/questions/12554947/mobile-safari-renders-img-src-dataimage-jpegbase64-scaled-on-canvas/12615436#12615436) and demonstrated how his sample image was resized correctly on your iPhone 5. However i think the orientation was correct because Andre exported the sample image from his iPhone to the web (perhaps through email) whereby the EXIF tag was removed, then you downloaded that image into your iPhone and ran imagefile-megapixel with an image not originally taken by your iPhone.

Similarly it seems to be the case that the EXIF tag is removed when I take an image with my iPhone (does not orientate correctly on Canvas), export to my computer (usually as an email attachment) and then resend it to my phone and then upload (orientates correctly) using Imagefile-Megapixel. This is somewhat of a false positive result.

Will there be any support in the future to address this EXIF tag issue?

In all other regards this is a great solution for IOS 6.0.1!

Best Regards

Our javascript files are compiled with a "use strict" header. Unfortunately that seems to cause an error in the file at line 175 where there is a check to see if the srcImage is an instance of a Blob. Since Blob isn't defined, the script proceeds to error out.

The quick fix, which seems as though it works, is to check to see if window.Blob exists prior to checking to see if it's an instance of said Blob.

if (window.Blob && srcImage instanceof Blob) {

Would be nice if MegaPixImage could render scaled images, like:

var imageWidth = 4000;
var imageHeight = 3000;
var newWidth = 80;
var newHeight = 60;

canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
canvas.getContext('2d').drawImage(image, 0, 0, newWidth, newHeight);

if I do:

canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;

var mpi = new MegaPixImage(image);
mpi.render(canvas, {
       width: newWidth,
       height: newHeight
});

the image get´s cropped

Looking at examples I can wonder how can I resize an image starting from a base64 coded one. Basically I have base64 coded image and want resize it.
I've tried by printing my base64 in to an image or a canvas and create a new MegaPixImage(myImgDomReference or myCanvasDomReference) but wont work.
I've also tried to convert my base64 image in to a blob and pass it to new MegaPixImage() constructor but noting.
Is there a solution you can suggest me?

Firefox on Android doesn´t like mega pix, too. Current version of mega-pix does not render on android.

If you try to reload a PNG that has an alpha layer, it just shows up as an empty black box.

Hi, stomita:

I use your solution to fixed the ratio bug in ios. But i came across a new problem. That is after compress the image that user toke by iphone camera, and upload. I can not get the full compressed image -- some part of image missing .

I search on goole , and can not found any detail about this problem.
Have you come across this problem or have any idea about it ?
Sorry about my english. may you understand my word : )

Here my code :
` function compress (source_img_obj, quality, scale, output_format) {

    var mime_type = "image/jpeg";
    var cvs = document.createElement('canvas');
    var w = source_img_obj.naturalWidth * scale
    var h = source_img_obj.naturalHeight * scale

    cvs.width = w;
    cvs.height = h;
    var ctx = cvs.getContext("2d");
    ctx.drawImage(source_img_obj,0,0,w,h);

  if (typeof output_format !== "undefined" && output_format == "png") {
    mime_type = "image/png";
  }
  // 修复IOS
  if( navigator.userAgent.match(/iphone/i) ) {
      var mpImg = new MegaPixImage(source_img_obj);
      mpImg.render(cvs, { maxWidth: w, /*maxHeight:h, */quality: quality});
      return cvs.toDataURL(output_format, quality-0.3);
  }

  // 修复android
  if( navigator.userAgent.match(/Android/i) ) {
      var encoder = new JPEGEncoder();
      return encoder.encode(ctx.getImageData(0,0,w,h), quality*100);
  }

 }

`

doesn't work in my iPad simulator iOS 5.1 on mac

It seems the downscaling is still incorrect for some images.

The subsampling and vertical squash is detected, but now the image is incorrectly horizontally downscaled by a factor of two.

http://jsfiddle.net/TmxQ8/3/embedded/result/

RT

It's about megapix-image.js source. MegaPixImage is a great javascript solution which fix iOS image file rendering issue for large images, but may be better to make vars with more readable names?

Better variables names will more helpful to understand what, for example, detectVerticalSquash method do and how it works.

Also, it will be better to change code with jsLint/jsHint options?
For example, I just get source code and open in my IDE and find what in detectVerticalSquash iw variable is unused :(

they interfere with my own debugging

There's an issue when using megapix-image.js on some transparent PNG's.
The issue is described in detail here: dropzone/dropzone#813
I managed to find and fix the problem, it's a 1 character fix.
In the detectVerticalSquash function, change this:

var data = ctx.getImageData(0, 0, 1, ih).data;

to this:

var data = ctx.getImageData(1, 0, 1, ih).data;

That's all. The library will work as before, and the problem with transparent PNG's is now fixed.

Hi,

Lifesaver with this code so thanks. I found that in some cases i was getting a error with 179 where createObjectURL(srcImage) was not defined on the null object. I found changing it to the below helped

if(window.webkitURL.createObjectURL){
  img.src = window.webkitURL.createObjectURL(srcImage);
}else{
  img.src = window.URL.createObjectURL(srcImage);
}

Have you come across this?

Hello !

Well, first, kudos to @stomita for finding this hack!
I can confirm this to be working on iOS7!

I plan to use this lib as a fallback for < iOS8 devices in my project.

I need squared images, so I managed to add a destOffsetX and destOffsetY settings.

But I would also need to crop portion (sX, sY, sW, sH) of the image..
And this is where part of the logic of the code eludes me.

While I can easily pin this to renderImageToCanvas(), I cannot figure how my sX, sY, sW, sH would interact in the two while() loops.

If anyone has a clue, that would be appreciated, as I have to admit, leaving iOS7 behind because of such canvas issues, kind of makes me... Hrmm... Unhappy.

Ps: If anyone wants my squared-offseted-image-mod, please drop a line, I will fill a PR.

hello.
sorry for bad english... i' ve the following problem:
i want to upload the result canvas. therefore i take the dataurl of the result canvas and start the upload with XHR Post-request.

i make it with the $.when - function, but on some (big) pictures there is the problem, that the image is corrupt. i guess that the image is not rendered completely. i have tried with a timeout, its better but is there another way?

//create canvas (with resize)
var mpImg = new MegaPixImage(file);
var resCanvas1 = document.getElementById('resultCanvas1');

$.when(mpImg.render(resCanvas1, { maxWidth: 1200, maxHeight: 800, orientation: orientation })).done(function(){
setTimeout(function()
{
upload(resCanvas1,someparams)
},500);
});

Hi, I've noticed that the javascript canvas context's drawImage method does a really poor quality resize. There is a good stack-overflow article on the subject, with example images and an excellent solution in the accepted answer (i've tested it, it works :) )...

http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

I wonder how easy it would be to use their downScaleCanvas method inside your renderImageToCanvas method?

When the image is rendered to the canvas, is there a way to adjust the quality like rendering to the image. I added the quality: 0.5, to the megapix.js (mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 300, quality: 0.5 });) but it does not change. I ask because I am using .toDataURL("image/jpeg") to send the canvas to my php page to save on my server.

on iOS 8.1.2 i only get blank canvas when cropping and / or resizing images.. (these are the only operations i tried).

is anybody else experiencing problems on iOS 8?

Hi,
I have been working with you librabry in conjunction with another one to be able to resample images on the iPhone and correct their orientation by getting the orientation dynamically.
I know that the value of my orientation is always the correct one and when I use the render function I am doing this:

this.mpImg.render(target, { width: this.photoBg.width, height: this.photoBg.height, orientation: this.exifOrientationTag});

This should suffice to correct the orientation but somehow whan I take a picture with a somewhat wide angle the photo is still bent/not properly oriented.

There may be something I am foing wrong but what that might be ?
I am testing on many devices, Androids and iOS alike but mainly an iPhone 5 on iOS 7.0.4.