Question

我正在使用phonegap，这对这个问题而言并不重要。当我使用capture.captureImage拍摄垂直图像时，它将恢复为水平。

无论如何，我想像旋转照片一样垂直旋转图像，并扩展到新创建的缩略图的顶部和底部，该缩略图的宽度为160px，高度为90px （16：9）。我想在16：9内保持9:16的翻转长宽比（就像我拍照片时一样） ，占据了90px高拇指的整个高度。

下面，我将显示img，尽管除非将id='captured_img'元素更改为本地URL，否则该代码将不起作用，这是由于{{ 1}}。 src这样。如果需要，可以右键单击并保存我提供的canvas.toDataURL()。

如果运行测试，您将看到<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

使用本地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即可使其与您喜欢的宽高比相匹配并确保将16/9更改为w/h。

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

1 个答案: