织物js中的Canvas客户端大小(Canvas client size in fabric js)

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

In a usual canvas css width and client width could be not equal to each other, how to get this on Fabricjs? As an example: I want 640*360px canvas on a page with 1280*720px image inside. I know I could scale image, but dataUrl will give me a smaller picture, isn't it?

最满意答案

有一个解决方案 。 您可以使用css大小初始化结构js，使用带有backstoreOnly标志的setDimensions或具有所需客户端大小的init，并使用带有cssOnly标志的setDimensions 。 示例＃1：

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

示例＃2：

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

There is a solution. You could init Fabric.js with CSS sizes and then setDimensions with backstoreOnly flag or init with desired client size and use setDimensions with cssOnly flag. Example #1:

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

Example #2:

var canvas = new fabric.Canvas('c', {width: 1280, height: 720}); canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});织物js中的Canvas客户端大小(Canvas client size in fabric js)

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

In a usual canvas css width and client width could be not equal to each other, how to get this on Fabricjs? As an example: I want 640*360px canvas on a page with 1280*720px image inside. I know I could scale image, but dataUrl will give me a smaller picture, isn't it?

最满意答案

有一个解决方案 。 您可以使用css大小初始化结构js，使用带有backstoreOnly标志的setDimensions或具有所需客户端大小的init，并使用带有cssOnly标志的setDimensions 。 示例＃1：

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

示例＃2：

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

There is a solution. You could init Fabric.js with CSS sizes and then setDimensions with backstoreOnly flag or init with desired client size and use setDimensions with cssOnly flag. Example #1:

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

Example #2:

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