使用 JavaScript 三角法缩放旋转图像以填充 HTML5 Canvas？

Question

下面是我当前正在使用的代码。通过0旋转，图像可以正确缩放以填充画布。（类似于background-size: cover，除了在 Canvas 上使用 JavaScript）

我正在尝试添加旋转功能，具有以下功能。

1. 旋转时保持图像居中。我尝试使用width / 2in translate，然后使用相反的 in drawImage，但如您所见，图像没有保持居中。我不确定这是否与我之前的居中代码冲突x，y或者这里是否需要三角学？

2. 自动进一步缩放图像以覆盖画布。这些是任意旋转，而不是 90 度增量。我不想裁剪超出填充画布角所需的图像。这是比我习惯处理的复杂得多的三角学。

我认为这可以用Math.sin和来完成Math.cos，但我已经很长时间没有使用它们了。我特别不确定如何实现#2。任何帮助，将不胜感激。

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'https://i.stack.imgur.com/7FsbT.jpg'

image.onload = function () {
  
  var maxScaleX = canvas.width / image.width
  var maxScaleY = canvas.height / image.height
  scale = maxScaleX > maxScaleY ? maxScaleX : maxScaleY
  
  var width = image.width * scale
  var height = image.height * scale
  var x = (width - canvas.width) / -2
  var y = (height - canvas.height) / -2
  
  var degrees = 30
  
  context.setTransform(1, 0, 0, 1, 0, 0) // reset previous translate and/or rotate
  context.translate(width / 2, height / 2)
  context.rotate(degrees * Math.PI / 180)
  
  context.drawImage(image, x - width / 2, y - height / 2, width, height)

}

<canvas width="350" height="150" style="border: solid 1px black"></canvas>

Answer 1

+1 给 Blindman67 的答案，使其起作用。

我缩短了代码并简化了我的用例。您应该能够将其包含function drawBestFit()到您的应用程序中并使用它来使用任何加载的图像填充任何画布。

为了更好地理解它是如何工作的，请查看Blindman67 的原始答案- 特别是底部的演示片段。

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'https://i.stack.imgur.com/7FsbT.jpg'

image.onload = function() {

  var degrees = 0

  loop()

  function loop() {
    degrees += .5
    drawBestFit(context, degrees * Math.PI / 180, image)
    requestAnimationFrame(loop)
  }

  function drawBestFit(ctx, angle, image) {
    
    var dist = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2))
    var diagAngle = Math.asin(canvas.height / dist)

    var a1 = ((angle % (Math.PI * 2)) + Math.PI * 4) % (Math.PI * 2)
    if (a1 > Math.PI)
      a1 -= Math.PI
    if (a1 > Math.PI / 2 && a1 <= Math.PI)
      a1 = (Math.PI / 2) - (a1 - (Math.PI / 2))
    
    var ang1 = Math.PI / 2 - diagAngle - Math.abs(a1)
    var ang2 = Math.abs(diagAngle - Math.abs(a1))
    
    var scale1 = Math.cos(ang1) * dist / image.height
    var scale2 = Math.cos(ang2) * dist / image.width
    
    var scale = Math.max(scale1, scale2)
    
    var dx = Math.cos(angle) * scale
    var dy = Math.sin(angle) * scale
    ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2)
    
    ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
    
    ctx.setTransform(1, 0, 0, 1, 0, 0) // reset transformations when done

  }

}

<canvas width="350" height="200" style="border: solid 1px black"></canvas>