在屏幕上显示缩小的 canvas，但使用“toDataURL”下载全尺寸 canvas

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 C_Z_想引起对这个问题的更多关注。

在我的 web 应用程序中，我有一个带有下载按钮的 canvas，该按钮将使用.toDataURL将当前的 canvas 下载为 PNG。

假设我的全尺寸 canvas 是 100px x 100px

我想在 web 页面上以按比例缩小的比例（比如说 50%）显示 canvas，但我希望下载以下载全尺寸图像。 我被困在如何实现这一目标上。 现在我正在缩小整个 canvas （canvas 元素的宽度和高度，以及使用 fabricCanvas 的toDataURL function 来缩放图像以用于显示。

理想情况下，我希望 canvas 在内部以全尺寸呈现（因此toDataURL将生成全尺寸 png），但以缩小尺寸显示在屏幕上。

TL;DR：有没有办法在屏幕上显示 50x50 像素 canvas，但使用toDataURL下载 100x100 版本？

小提琴： https://jsfiddle.net/pahxjd1s/35

Answer 1

一件事是<canvas>元素的大小，另一件事是其bitmap的大小。
如果您希望图像的实际尺寸为100x100 ，只需使用width和height属性设置尺寸即可。 现在要让<canvas>元素的大小为50x50 ，只需使用 CSS。

<style>
.canvas {
  width: 50px;
  height: 50px;
}
</style>
<canvas class="canvas" width="100" height="100"></canvas>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#sizing_the_canvas_using_css_versus_html

Answer 2

不确定这是否适合您，但一种快速的方法是将缩放变换应用于父 div。

<div style={{ display: "inline-block", border: "solid", transform: `scale(${SCALE})`}}>
  <canvas
    ref={ref}
    width={100}
    height={100}
  />
</div>

这也会调整fabricjs的控制点大小并添加一个边距（因为fabric直接管理canvas的样式）。 您可以通过添加边距来抵消margin: `-${100 * SCALE / 2}px`

我认为理想的解决方案可能会有一个辅助 canvas 以获得更高的分辨率，或者按需生成一个，但这个技巧可能足以让你得到你的结果。