缩放后使用鼠标缩放不正确

时间:2015-02-09 14:41:29

标签: fabricjs

感谢您阅读此问题:)

目标:

我使用Fabric.js作为图像编辑器的基础(现在主要是裁剪和调整大小功能)。

我的目标是加载一些高质量的图像(如照片)旋转或裁剪,然后导出为DataURL(原始质量或靠近它)。

解决方案:

要在画布上添加如此大的照片并能够以相同的质量导出它 - 我将画布的宽度和高度设置为等于图像的宽度和高度( 2560×1600px )然后使用css将其压缩到 640x400px (编辑器大小)。 (我用https://stackoverflow.com/a/17035046作为基础) 在这种情况下,我仍然可以使用canvas.toDataURL()导出大尺寸图像 - 它将是大约2560x1600(这是我的目标)。

工作原理:http://jsfiddle.net/handmade/Lqsb0kwv/4/

问题描述:

将缩放功能(canvas.zoomToPoint(...))添加到编辑器后出现问题,它与画布的css宽度和高度限制有关。

尝试使用上面jsfiddle中的控件更改图像大小,您将看到一个问题。

工作正常,如果......

...如果我不使用css限制:http://jsfiddle.net/handmade/Lqsb0kwv/5/

问题:

我已经在Stack Overflow上阅读了90%的Fabric.js文档,示例,教程和问题,但我找不到解决方案。

我不确定使用css来限制画布是一种很好的做法。

我不确定我在大尺寸上改变图像的方式是一种好方法。

有没有人知道以更好的方式导出图像的更好方法?

有人知道缩放后缩放/旋转图像的问题(+受css限制)是Fabric.js中的错误吗?

谢谢你的回答!

0 个答案:

没有答案