非常感谢您提前提供任何帮助。我正在写一个phonegap应用程序,无法在不丢失方面或错误裁剪图像的情况下缩小照片。在下面的函数中,“imageData”是相机拍摄的64位照片。我可以将图像绘制到我页面上的画布上,但如果图片是在横向拍摄的,那么它就会被打碎。如果我不通过使用缩放功能或drawimage功能缩放它,那么我只获得照片的顶角。一个例子:我拍了一张照片,onPhotoDataSuccess函数中的图像宽度显示为1296px宽,968px高。但我在iPhone上的画布是272像素宽(肖像模式)。我在网上尝试了很多不同的缩放方法,这似乎是最接近的。我做错了什么?
function onPhotoDataSuccess(imageData)
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d");
myImage.onload = function()
{
thecanvas.setAttribute('width', '100%');
thecanvas.setAttribute('height', 'auto');
ctx.scale((myImage.width * 0.15), (myImage.height * 0.15));
ctx.drawImage(myImage, 0, 0);
}
myImage.src = "data:image/jpeg;base64," + imageData;
}
答案 0 :(得分:7)
缩放内置于drawImage。
在处理画布时不要使用setAttribute,而是调用canvas.width = 272
,而只使用整个像素值。
以下是一些可以帮助您入门的工作代码:
function onPhotoDataSuccess(imageData)
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d");
myImage.onload = function() {
ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);
}
myImage.src = "http://placekitten.com/1296/968";
}
onPhotoDataSuccess(null);
实例:
答案 1 :(得分:1)
你可以这样绘制,没有scale
函数:
ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);
但是,必须明确设定分辨率,而不是百分比。 E.g:
window.onload = function() {
thecanvas.width = window.width;
thecanvas.height = window.height;
}