1

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

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

我希望较小的画布宽度为 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);
}

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

感谢任何帮助。

编辑 我想要图片中的图像，因为稍后我希望用户在较小版本中标记区域，然后我想使用这些区域从大版本中创建单个图像。我想将这个区域可视化给用户。我可能可以通过使用图像并在其上放置 div 或其他方式来完成所有这些操作，但我只是对使用画布更加自信，因为我对 HTML 和 CSS 还很陌生。

4

2 回答 2

1

尝试使用该CanvasRenderingContext2d.prototype.scale方法。它设置画布的比例因子并渲染当前状态的任何东西，其尺寸乘以该因子。

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

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

这将在上下文中以当前大小的 0.5 倍呈现画布。在这个小提琴中看看我是如何用它把一个更大的画布镜像到一个更小的、独立的画布上的。

于 2013-09-02T14:57:55.493 回答
0

画布对象不喜欢调整大小。绘制您的图像后，只需将其转换为 DataURL() 并设置为图像源。他们您可以根据需要调整图像大小。

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

于 2013-09-02T13:26:05.297 回答