Phonegap camera draw on canvas distorted

问题

I'm using Phonegap Camera Plugin to draw the captured image on a Canvas.

<canvas id="canvas"></canvas>

And the JS:

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var x = 0;
            var y = 0;
            var width = window.innerWidth;
            var height = window.innerHeight;
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj, x, y, width, height);
            };
            imageObj.src = imageURI;

The projected images look distorted (streched, width is bigger than real).

How can I display the image ok, like in css width:100%; height:auto?

回答1:

If your image doesn't have the same ratio as your screen, it'll become stretched since you tell it to stretch to width and height: context.drawImage(imageObj, x, y, width, height);. You can try removing the width, height parameters.

You might have to calculate the scaling ratio:

var ratio;
if (imageObj.width>width) {
    ratio = width/imageObj.width;
}
else if (imageObj.height > height) {
    ratio = height/imageObj.height;
}
else {
    ratio = 1;
}
context.drawImage(imageObj, x, y, imageObj.width*ratio, imageObj.height*ratio);

来源：https://stackoverflow.com/questions/29151943/phonegap-camera-draw-on-canvas-distorted