javascript - 将 Canvas 绘制成较小的 Canvas 不起作用

Question

对于一个元素，我想获取 Canvas (称为 SAVE_CV)的内容并将其显示在另一个较小的 Canvas 中。

到目前为止我知道的一些事情可能会导致我出现问题:调整 Canvas 大小会清除其内容， Canvas 的 JS 大小与 CSS 大小不同。

我希望较小的 Canvas 宽度为 500 像素并且高度适当。

function restoreTaggingCV() {
    var cv = document.getElementById( 'taggingCV' );
    var ctx = cv.getContext( "2d" );
    var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
    ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}

到目前为止，这是我的代码。每当我尝试适当调整较小 Canvas 的大小时，它只会给我一个空白 Canvas ，里面什么也没有。我尝试使用 "cv.height = X"和 "cv.style.height = styleHeight + 'px'" 设置大小，但均无效。我也很想使用 CSS 设置 Canvas 的宽度。

感谢任何帮助。

编辑我想要图片中的图像，因为稍后我希望用户在较小的版本中标记区域，然后我想用它来创建来自大版本的个人图像。我想向用户可视化此区域。我可能可以通过使用图像并在其上放置 div 或其他东西来完成所有这些操作，但我对使用 Canvas 更加自信，因为我是 HTML 和 CSS 的新手。

Answer 1

尝试使用 CanvasRenderingContext2d.prototype.scale 方法。它设置 Canvas 的比例因子，并以其尺寸乘以该因子呈现当前状态下的任何内容。

因此，在使用 drawImage 函数之前，您需要适本地缩放上下文(在本例中为缩小)。例如:

context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();

这会将 Canvas 渲染为当前大小的 0.5 倍。参见 this fiddle我如何使用它将较大的 Canvas 镜像到较小的独立 Canvas 上。