调整画布大小而不裁剪

机长

我一直遇到用画布生成图像的问题,但是当我在CSS中更改尺寸时,尺寸不会改变。例如:假设我在画布中创建了一个200px x 200px的正方形图像。然后在CSS中,将尺寸设置为100px x 100px。除了缩放图像外,仅显示原始图像的1/4。如何在不实际更改画布本身的情况下缩放画布?

预期结果。

您的矩形未裁剪,正在调整大小

  • 200x200画布具有40,000像素
  • 100x100画布具有10,000像素

较小的画布为较大画布的1/4,矩形为1/4。

在不了解您的设计要求的情况下,您可能要避免使用CSS缩放画布如您所知,使用CSS更改宽度/高度将“拉伸/缩小”工程图的大小。

相反,请更改canvas元素的宽度/高度,而不是CSS宽度/高度。当您更改画布元素的宽度/高度时,您已经完成的所有绘图都将被删除(您必须重新绘制这些绘图)。但是新图纸的尺寸将“正确”。

当您想要调整画布大小(在javascript中)时:

var canvas = document.getElementById("myCanvas");
canvas.width=100;
canvas.height=100;

// changing the canvas width/height will automatically erase and drawings
// so you must now redraw those drawings.

如果要缩放画布而不必重新绘制,可以执行以下操作:

var img=new Image();
img.onload=function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=100;
    canvas.height=100;
    ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src=canvas.toDataURL();

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

按比例调整UIImage的大小,然后裁剪

来自分类Dev

调整画布项目的大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何调整大小然后使用画布裁剪图像

来自分类Dev

fabric js-根据画布中添加的矩形调整完整画布的大小,以实现裁剪

来自分类Dev

调整画布图像的大小

来自分类Dev

调整画布元素/形状的大小

来自分类Dev

C#裁剪并调整大图像的大小

来自分类Dev

在调整大小窗口上裁剪图片

来自分类Dev

裁剪矩形未在响应图中调整大小

来自分类Dev

无法调整画布大小

来自分类Dev

角度画布在调整大小时不刷新

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

调整大小和裁剪,内存不足

来自分类Dev

UIImage调整大小并裁剪以适合框架

来自分类Dev

PHP调整大小并裁剪居中的顶部图像

来自分类Dev

尝试调整画布元素的大小,但正在发生裁剪效果

来自分类Dev

调整窗口大小时裁剪文本

来自分类Dev

如何调整画布大小

来自分类Dev

调整画布图像的大小

来自分类Dev

在调整大小窗口上裁剪图片

来自分类Dev

调整画布元素的大小

来自分类Dev

在画布中调整图像大小

来自分类Dev

使用 getImageData 调整画布大小

来自分类Dev

如何使用 angular 2 和 typescript 裁剪图像、调整裁剪框的大小并将其保存在另一个画布中

来自分类Dev

KonvaJS 裁剪和调整大小

来自分类Dev

如何在不裁剪或降低质量的情况下调整图像大小?

来自分类Dev

画布:在不模糊的情况下调整图像大小

来自分类Dev

画布调整大小 photoshop 脚本