2

Since the last post has been too messy, I've opened a new thread here.

I am trying to retrieve the exact RGBA values in a .png file from my server using javascript.

The code is like: 

img = new Image();
img.crossOrigin = "Anonymous";
img.src = PNGsrc;
img.onload = function(){
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img,0,0);
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data; 
}

Therefore, I am expecting the elements in the array data to be exactly the same RGBA values in the PNG file. This piece of code works fine on desktops, laptops. However, on mobile devices(iOS 8.4.1, Android ... ), I am not getting the origin value in PNG.

Let's say I have [4,0,4,255] at the first pixel, [199,0,147,255] at the second pixel and [199, 0, 147, 255] at the third pixel. I will get data = [4, 0, 4, 255, 199, 0, 147, 255, 199, 0, 147, 255] on PC, but data = [150, 0, 112, 255, 158, 0, 117, 255, 200, 0, 149, 255] on mobiles(iPhone simulator as well).

@Kaiido I have read through the duplicated post but seems like the problems are different.

My image is pretty large so it might take some time to load. On PC it's giving me a [4,0,4] as the image should be , on iOS simulator or iPhone6 it's still giving me the wrong result.

Not working full sized image version:

jsfiddle.net/1c2q61be/3/

However, I have found that this code is working properly when I cut and only takes the upper left corner of the image, as it is in the following link:

jsfiddle.net/1c2q61be/4/

But a full sized image with the canvas width and height being forced set to 100,100 version is not working (this is how I get my cut version image data using canvas.toDataURL('image/png') ) :

jsfiddle.net/1c2q61be/5/

This may be the part where it is actually going wrong.

Thank you very much.

Thanks @Kaiido. That is where the stuff is going wrong. I solved this problem by using https://github.com/devongovett/png.js/ So that the javascript can decode the png without browser's support and be able to overpass the mobile limitation. In this way, I can retrieve my data correctly without worrying about the size of the image.

The problem is solved. I will just leave the solution here for possible future references.

Community
  • 1
  • 1
littlecounter
  • 21
  • 4
  • 2
    possible duplicate of [Maximum size of a element](http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) – Kaiido Sep 15 '15 at 03:48
  • And especially refer to [this answer](http://stackoverflow.com/a/23391599/3702797) and [this one](http://stackoverflow.com/a/22345796/3702797) – Kaiido Sep 15 '15 at 03:48
  • Thanks @Kaiido. That is where the problem is. XD – littlecounter Sep 15 '15 at 19:21

1 Answers1

0

Thanks @Kaiido. That is where the stuff is going wrong. I solved this problem by using https://github.com/devongovett/png.js/ So that the javascript can decode the png without browser's support and be able to overpass the mobile limitation. In this way, I can retrieve my data correctly without worrying about the size of the image.

The problem is solved. I will just leave the solution here for possible future references.

littlecounter
  • 21
  • 4