Phonegap相机在画布上的绘制失真

Phonegap camera draw on canvas distorted

本文关键字：绘制 失真 相机 Phonegap      更新时间：2023-09-26

我正在使用Phonegap相机插件在画布上绘制捕获的图像。

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

以及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;

投影的图像看起来失真（拉伸，宽度大于实际值）。

如何显示图像ok，如css宽度：100%；高度：自动？

如果您的图像与屏幕的比例不相同，那么它将被拉伸，因为您告诉它拉伸到宽度和高度：context.drawImage(imageObj, x, y, width, height);。您可以尝试删除宽度、高度参数。

您可能需要计算缩放比例：

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);
相关文章：