在canvas上调整照片大小而不会丢失宽高比

大家好，感谢您提前提供的任何帮助。 我正在写一个phonegap应用程序，无法在不丢失方面或错误裁剪图像的情况下缩小照片。 在下面的函数中，“imageData”是相机拍摄的64位照片。 我可以将图像绘制到我页面上的canvas上，但如果图片是在横向拍摄的，那么它就会被打碎。 如果我不通过使用缩放function或drawimagefunction缩放它，那么我只获得照片的顶角。 一个例子：我拍了一张照片，onPhotoDataSuccess函数中的图像宽度显示为1296px宽，968px高。 但我在iPhone上的canvas是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; } 

Answer 1

缩放内置于drawImage。

在处理canvas时不要使用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/

Answer 2

您可以像这样绘制，没有scalefunction：

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

但是，必须明确规定决议，而不是百分比。 例如：

 window.onload = function() { thecanvas.width = window.width; thecanvas.height = window.height; }