感谢您阅读此问题:)
目标:
我使用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中的错误吗?
谢谢你的回答!