6

大家好，感谢您提前提供的任何帮助。我正在编写一个 phonegap 应用程序，并且无法在不丢失外观或错误裁剪图像的情况下缩小照片。在下面的函数中，“imageData”是相机拍摄的照片的 64 位字符串。我可以在我的页面上将图像绘制到画布上，但如果图片是横向拍摄的，那么它会被粉碎在一起。如果我不使用 scale 函数或 drawimage 函数对其进行缩放，那么我只会得到照片的顶角。一个例子：我拍了一张照片，onPhotoDataSuccess 函数中的图像宽度显示它是 1296px 宽和 968px 高。但我在 iPhone 上的画布是 272px 宽（纵向模式）。我在网上尝试了许多不同的缩放方法，这似乎不是最接近的。我究竟做错了什么？

 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;      
}
4

2 回答 2

8

缩放内置于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);

现场示例：

http://jsfiddle.net/QBTrg/6/

于 2011-07-19T18:59:26.293 回答
1

你可以像这样画，没有这个scale功能：

ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);

但是，必须明确设置分辨率，而不是百分比。例如：

window.onload = function() {
    thecanvas.width = window.width;
    thecanvas.height = window.height;
}
于 2011-07-19T18:46:22.793 回答