Question

对于项目，我想获取画布的内容（称为SAVE_CV）并将其显示在另一个较小的画布中。

到目前为止我所知道的一些事情可能会给我带来问题：调整画布大小会清除其内容，画布的JS大小与CSS大小不同。

我希望较小的画布宽500px并且适当高。

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);
}

这是我的代码到目前为止。每当我尝试适当地调整较小的画布时，它只会给我一个空白的画布，里面没有任何东西。我尝试用"cv.height = X" and "cv.style.height = styleHeight + 'px'"设置大小，但都没有效果。另外我想用CSS设置画布的宽度。

感谢任何帮助。

修改我希望图片在图片中，因为后来我希望用户在较小的版本中标记区域，然后我想用它来创建从大版本中成像的单个图像。我想向用户显示这个区域。我可能可以通过使用一个图像并将div放在它上面来做所有这些，但我只是因为我对HTML和CSS不熟悉而更加使用画布。

Answer 1

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

因此，在使用drawImage函数之前，您需要适当地缩放上下文（在本例中为down）。例如：

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

这会使上下文中的画布呈现当前大小的0.5倍。请参阅this fiddle我是如何使用它将较大的画布镜像到较小的独立画布上的。

Answer 2

Canvas对象不喜欢被重新调整。绘制图像后，只需将其转换为DataURL（）并设置为图像源。它们您可以根据需要调整图像大小。

$img.attr('src',canvas.toDataURL());

将画布绘制为较小的画布不起作用

2 个答案: