在保持纵横比（iOS，Android）的同时重新缩放Canvas元素上的Image对象

Question

我正在尝试加载一个HTML文件，该文件执行一项操作：在自动调整大小的canvas元素上显示图像，并自动重新调整为相关设备的最大尺寸。

例如：

• 用户按下设备上的按钮。
• 设备将WebKit / WebView打开到http://some.url/page.html。
• 该页面以所述设备上可能的最大高度/宽度比例显示image.png。

要求：

• 实际HTML文件应仅包含正文中的canvas元素。
• 图像路径应该是动态的，并且在加载文件后解释宽度/高度。
• 没有第三方依赖。

我在这里捅了一下，但遇到了问题：http://jsfiddle.net/zfG2B/

if (scaledHeight < scaledWidth) {

    _config.newImgHeight = _cache.canvas.height;
    _config.newImgWidth = Math.round(_config.newImgHeight * _config.imgWidthRatio);

} else if (scaledWidth < scaledHeight) {

    _config.newImgWidth = _cache.canvas.width;
    _config.newImgHeight = Math.round(_config.newImgWidth * _config.imgHeightRatio);

}

我拼凑的代码（上面，并参见jsfiddle）类似的工作，但我只能根据高度重新调整它。关于我做错了什么或最好的前进道路的任何想法？

作为参考，我试图加入最好的：

• HTML5 Canvas Resize (Downscale) Image High Quality?
• Scaling HTML5 canvas width preserving w/h aspect ratio
• Resizing an image in an HTML5 canvas
• HTML5 Canvas drawImage ratio bug iOS
• scaling a canvas element and keeping the aspect ratio

所以这就是问题：在HTML5中将图像放在画布上的最佳方法是什么，并根据当前屏幕尺寸自动重新缩放？能够指定裁剪范围的加分点！