0

I have an application where the users shoots or selects a picture and it gets displayed on a canvas (Cordova 3, iPhone4S) with Cordova Camera API.

Now I am experiencing a problem with image sizes. iPhone Screenshots, Landscape Photos, Portrait Photos all have different resolutions and sizes. And often the image gets cut or stretched in my canvas.

I tried it with image tag before. That worked well. But I am having problem with canvas.

At the moment I have

var canvas = document.getElementById("myCanvas");
canvas.width = 640;
canvas.height = 960;
canvas.style.width = "100%";
canvas.style.height = "100%";

It works if I load a screenshot in the canvas, but if I load a photo in the canvas it gets cut.

Here two photo examples (portrait and landscape) loaded from iPhone's photo library.

How it is:

enter image description here

How it should be:

(the one at the bottom)

enter image description here

How it is:

enter image description here

How it should be:

enter image description here

Any Idea how to get the canvas to display the full image with every ing size/resolution?

Thank you.

Kallewallex
  • 523
  • 1
  • 6
  • 24
  • Please also show the code where you use `drawImage()` . I assume you're trying to achieve something [like this](http://abdiassoftware.com/easycanvas/samples/sample_drawimageprop.html)? –  Dec 29 '13 at 16:46
  • `canvas.drawImage(img, 0, 0);` but I already managed to find a solution. I am now using targetWidth and targetHeight parameter in camera.getPicture function. But I have another problem now, regarding getting the clicked pixels color (**see below**). I don't know if I should open a new question for that. – Kallewallex Dec 29 '13 at 23:01
  • A new question is probably best for this as it differs from the original question. –  Dec 29 '13 at 23:18

1 Answers1

1

I figured it out myself. I just added targetWidth and targetHeight to the camera.getPicture function

var canvas = document.getElementById("myCanvas");
canvas.width = 600;
canvas.height = 960;
canvas.style.width = "300px";
canvas.style.height = "480px";

camera function

navigator.camera.getPicture(funcSuccess, funcError, { quality: 100, targetWidth: 600, targetHeight: 960, destinationType: destinationType.FILE_URI, sourceType: source });

In the success function:

canvas.drawImage(img, 0, 0);

anyway... because I am using different caves.width/height and canvas.style.with/height (for retina optimized) I now have another problem. My function to get the clicked pixels colors does not work properly.

I am using this (first answer): Get pixel color from canvas, on mouseover in my canvas tap event. But when using retina sizes it always returns false colors. Like it reads the pixels expecting that the image is 600x960 instead of 300x480 in an 600x960 pixel canvas.

Anyone any Idea?

Community
  • 1
  • 1
Kallewallex
  • 523
  • 1
  • 6
  • 24