如何在保持旋转的宽高比和调整高度的同时旋转画布并调整其大小？

Question

我正在使用phonegap，这个问题相对不重要。 当我拍摄垂直图像时，使用capture.captureImage ，它将返回水平。

. 无论如何，我想像旋转照片一样垂直旋转图像，并扩展到新创建的缩略图的顶部和底部，该缩略图的宽度为160px，高度为90px 。 of 9:16 within the 16:9 taking up the entire height of the 90px high thumb. 我想在16：9内保持其9:16的翻转长宽比，占用90px高拇指的整个高度。

在下面，我展示了img ，但是除非使用canvas.toDataURL()导致外部图像src安全问题，否则除非将id='captured_img'元素更改为本地URL，否则代码将无法工作。 所以<img width='160' height='90' id='captured_img' src='mustBeLocal.png' /> 。 如果需要，可以右键单击并保存我提供的img 。

如果运行测试，您会发现horizontal工作正常。 但是，出于我不知道的原因， vertical测试显示的图像看起来比显示的尺寸小。

如果您能指出正确的方向，我将不胜感激。

 var doc, M, I; onload = function(){ // make sure DOM is loaded doc = document; M = function(tag){ return doc.createElement(tag); } I = function(id){ return doc.getElementById(id); } var captured_img = I('captured_img'), canvas = M('canvas'), ctx = canvas.getContext('2d'), horizontal = I('horizontal'), vertical = I('vertical'); var output_img = I('output_img'); function reuse(force){ // just using force because you're not on your phone var iw = captured_img.width, ih = captured_img.height, w, h, hw = 0, hh = 0, s; if(force || innerWidth < innerHeight){ h = 50.625*iw/ih; w = h*ih/iw; s = true; } else{ w = 160; h = w*ih/iw; } canvas.width = w; canvas.height = h; console.log(w+'--'+h); // width and height are showing correctly // formula was also tested using a 400 x 300 image and aspect results look good to me - 4:3 90px high if(s){ hw = w/2; hh = h/2; ctx.translate(hw, hh); ctx.rotate(Math.PI/2); } ctx.drawImage(captured_img, -hw, -hh, w, h); output_img.src = canvas.toDataURL(); ctx.restore(); } horizontal.onclick = function(){ reuse(); } vertical.onclick = function(){ reuse(true); } }// end load

 #container{ width:160px; height:90px; background:#000; text-align:center; } #output_img{ vertical-align:middle; } #captured_img,#container{ border:1px solid gold; } input[type=button]{ margin-top:5px; }

 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='description' content='Test Page' /><meta name='keywords' content='test page, test template' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <title>Test Template</title> <link type='text/css' rel='stylesheet' href='external.css' /> <script type='text/javascript' src='external.js'></script> </head> <body> <div class='main'> <h2>160 x 90 - 16:9 aspect ratio</h2> <img width='160' height='90' id='captured_img' src='https://i.stack.imgur.com/nZQLy.png' alt='needs to be a local URL' /> <hr /> <div id='container'><img id='output_img' /></div> <input id='horizontal' type='button' value='horizontal' /> <input id='vertical' type='button' value='vertical' /> </div> </body> </html>

使用本地URL时，实际上没有安全错误。 只需保存我的图像并在XAMPP或WAMP上进行测试。 代码和图像非常安全。

Answer 1

经过一堆通过错误测试的随机试验后，我得出结论，我的reuse函数应如下所示：

 function reuse(force){ // just using force because you're not on your phone var iw = captured_img.width, ih = captured_img.height, w, h, hw, hh, s; if(force || innerWidth < innerHeight){ iw = ih; ih = captured_img.width; s = true; } if(iw/ih < 16/9){ h = 90; w = h*iw/ih; } else{ w = 160; h = w*ih/iw; } canvas.width = w; canvas.height = h; if(s){ hw = w/2; hh = h/2; ctx.save(); ctx.translate(hw, hh); ctx.rotate(Math.PI/2); ctx.drawImage(captured_img, -hh, -hw, h, w); ctx.restore(); } else{ ctx.drawImage(captured_img, 0, 0, w, h); } output_img.src = canvas.toDataURL(); }

这让我发疯。 希望这将对遇到相同问题的任何人有所帮助。

PS

如果您希望任何东西适合任何宽高比，则只需更改w和h var使其与首选宽高比相匹配，并确保将w/h更改为16/9 。

如何在保持旋转的宽高比和调整高度的同时旋转画布并调整其大小？

问题描述

1 个解决方案

解决方案1
0 2019-01-25 05:37:06

如何在保持旋转的宽高比和调整高度的同时旋转画布并调整其大小？

问题描述

1 个解决方案

解决方案1 0 2019-01-25 05:37:06

解决方案1
0 2019-01-25 05:37:06