用 css 样式覆盖的画布内联高度和宽度属性.这是一个错误吗? [英] Canvas inline height and width attributes overridden with css styles. Is this is a bug?

问题描述

我最近问了一个问题 关于如何在不裁剪的情况下将比我的画布更大的图像绘制到画布上，并在对其进行一些更改后将图像保存回其原始尺寸.我发现解决方案是为画布设置大于图像的内联 height 和 width 属性，并使用 css height 和 width 属性来设置画布的样式以适合您的布局.

I recently asked a question on how to draw an image larger than my canvas onto the canvas without cropping and save the image back into its original dimensions after performing some changes on it. I found the solution is to set the inline height and width attributes for the canvas larger than the image, and use css height and width properties to style the canvas to fit into your layout.

例如，假设我的图像的尺寸范围在 400 像素到 2000 像素之间.但我不希望画布太大，也不希望图像也被裁剪(因为使用 toDataURL 保存图像时，画布上的内容就是保存的内容).这是有效的:

For example, assuming my images could range between 400px to 2000 px in dimensions. But I don't want the canvas to be so big, and I don't want the images to be cropped as well (because when saving the image with toDataURL what is on the canvas is what is saved). This is what works:

//style
#mycanvas{
    width: 400px;
    height: 400px;
}

<canvas id="mycanvas" width="2000" height="2000" />

这很好用，而且我的图像效果很好.但是这种行为是否存在问题并且将来一定会被更改/修复?我打算将此解决方案用于手头的任务.

This works fine and my images come out well. But is this behavior buggy and bound to be changed/fixed in the future? I'm planning to use this solution for a task at hand.

有什么指导吗?

推荐答案

这种行为通常用于控制画布的大小:

This behaviour is commonly used for controlling the size of a canvas:

• 分辨率属性
• 用于拉伸/收缩的 CSS

请参阅 HTML5 中的画布宽度和高度.

这篇关于用 css 样式覆盖的画布内联高度和宽度属性.这是一个错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！