Phonegap相机在画布上绘制扭曲 [英] Phonegap camera draw on canvas distorted
问题描述
我正在使用Phonegap相机插件在画布上绘制捕获的图像。
I'm using Phonegap Camera Plugin to draw the captured image on a Canvas.
<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;
投影图像看起来失真(拉长,宽度大于真实值)。
The projected images look distorted (streched, width is bigger than real).
如何确定图像的显示效果,例如css width:100%; height:auto?
How can I display the image ok, like in css width:100%; height:auto?
推荐答案
如果您的图片与屏幕的比例不同,则自您使用以来图片会被拉伸告诉它伸展到宽度和高度: context.drawImage(imageObj,x,y,width,height);
。您可以尝试删除width,height参数。
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);
这篇关于Phonegap相机在画布上绘制扭曲的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!