在node-canvas中水平旋转图像？

Question

​

​

​

​

我需要用node-canvas做这样的事情的帮助。只是将图像翻转成另一种方式。

Answer 1

您可以通过将图像平移到最右侧，然后沿x轴从右向左缩放来反转图像。

const drawImage = (ctx, image) => {
  let { width, height } = image
  Object.assign(ctx.canvas, { width, height })
  ctx.save()
  ctx.translate(width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(image, 0, 0)
  ctx.restore()
}

演示

​

const getContext = (selector) =>
  document.querySelector(selector).getContext('2d')

/* Derived from: https://stackoverflow.com/a/52060802/1762224 */
const loadImage = (url) => {
  return new Promise(resolve => {
    const image = new Image()
    image.addEventListener('load', () => resolve(image))
    image.src = url
  })
}

const drawImage = (ctx, image, flipX, flipY) => {
  let { width, height } = image
  Object.assign(ctx.canvas, { width, height })
  ctx.save()
  if (flipX || flipY) {
    ctx.translate(flipX ? width : 0, flipY ? height : 0)
    ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1)
  }
  ctx.drawImage(image, 0, 0)
  ctx.restore()
}

loadImage('https://i.stack.imgur.com/wF6Vr.png')
  .then(image => {
    drawImage(getContext('.original'), image)
    drawImage(getContext('.flipped-x'), image, true)
    drawImage(getContext('.flipped-y'), image, false, true)
    drawImage(getContext('.flipped-both'), image, true, true)
  })

.in-line {
  display: inline-block;
  width: 20%;
}

<canvas class="in-line original"></canvas>
<canvas class="in-line flipped-x"></canvas>
<canvas class="in-line flipped-y"></canvas>
<canvas class="in-line flipped-both"></canvas>

​