在画布上调整照片大小而不丢失纵横比

Posted

技术标签:

【中文标题】在画布上调整照片大小而不丢失纵横比【英文标题】:Resizing photo on a canvas without losing the aspect ratio 【发布时间】:2011-10-08 19:17:54 【问题描述】:

大家好,感谢您提前提供的任何帮助。我正在编写一个 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;      

【问题讨论】:

【参考方案1】:

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/

【讨论】:

【参考方案2】:

你可以像这样画,没有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;

【讨论】:

以上是关于在画布上调整照片大小而不丢失纵横比的主要内容,如果未能解决你的问题,请参考以下文章

在 iOS 中调整图像大小并保持其纵横比

预览窗格中照片的纵横比,其中高度恒定且仅宽度变化

在不改变原始纵横比的情况下将位图大小调整为 512x512

XCode:调整图像大小使用纵横比并向下移动图像下方的元素

ImageView 调整大小并保持纵横比

在集合视图单元格中自行调整图像大小