小编use*_*566的帖子

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

大家好,谢谢你提前帮忙.我正在写一个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;      
}
Run Code Online (Sandbox Code Playgroud)

jquery resize image css3 html5-canvas

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

css3 ×1

html5-canvas ×1

image ×1

jquery ×1

resize ×1