p5.js |如何将画布的大小设置为捕获的大小答案

【问题标题】：p5.js | How do I set the size of the canvas to that of the capturep5.js |如何将画布的大小设置为捕获的大小
【发布时间】：2021-12-21 14:14:54
【问题描述】：

我想用下面的代码结束：

400x400 相机拍摄
400x400 画布
400x400 图片

let capture
let universalWidth = 400
let testImg = undefined

function setup() {
  testImg = document.getElementById('test')
  
  capture = createCapture({
    audio: false,
    video: {
      width: universalWidth,
      height: universalWidth
    }
  })

  capture.size(universalWidth, universalWidth)

  createCanvas(universalWidth, universalWidth)
}

function draw() {

  image(capture.get(), 0, 0)

  testImg.src = canvas.toDataURL()

}

相反，我最终得到的是：

400x400 相机拍摄
一个 400x400 的画布，其 width 和 height 属性设置为 800
800x800 图片

我该如何解决这个问题？

你可以看到问题在行动here

【问题讨论】：

标签： javascript image-processing canvas p5.js

【解决方案1】：

画布的宽度和高度属性设置为 800，因为您在高 DPI（即 Apple Retina）显示器上运行此草图。当 p5.js 检测到这一点时，它默认将像素密度设置为 2，因此它会将 800 像素正方形的图形压缩成屏幕上的 400“像素”正方形。如果您想要一个实际像素正好为 400 的图像，您可以在 setup() 函数中将像素密度设置为 1：pixelDensity(1)。

【讨论】：