如何在保持旋轉的寬高比和調整高度的同時旋轉畫布並調整其大小？

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