Canvas fabric js 中的客户端大小

Question

通常 canvas css 宽度和客户端宽度可能不相等，如何在 Fabricjs 上得到这个？例如：我想要 640*360px canvas 页面上有 1280*720px 图片。我知道我可以缩放图片，但 dataUrl 会给我一张更小的图片，不是吗？

Answer 1

的 setWidth/setHeight 属性更改 canvas 的大小

例如

canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(360);

虽然你应该澄清你的意思。

Answer 2

有一个solution。您可以使用 CSS 大小初始化 Fabric.js，然后使用 backstoreOnly 标志初始化 setDimensions，或者使用所需的客户端大小初始化并使用 setDimensions 和 cssOnly 标志。示例 #1：

var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});

示例 #2：

var canvas = new fabric.Canvas('c', {width: 1280, height: 720});
canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});

Canvas client size in fabric js