ikuaitu / vue-fabric-editor

快图设计-基于fabric.js和Vue的开源图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
https://ikuaitu.github.io/doc/#/
MIT License
5.67k stars 1.04k forks source link

feat(图片): 添加图片裁剪功能 #543

Closed x007xyz closed 1 week ago

x007xyz commented 1 week ago

Fixes #541

nihaojob commented 1 week ago

感谢大佬参与开源,我这边测试图片无法正常展示 image

x007xyz commented 1 week ago

本地上传的图片吗?

nihaojob commented 1 week ago

本地上传的图片吗?

效果特别赞👍👍👍,还有 2 个小问题,一个是 切换裁剪比例时,裁剪框自动撑满,另外一个是点击确认后,画布中的图片比例和宽高不是最新的,大佬是不是可以再调整下细节?

x007xyz commented 1 week ago

一个是 切换裁剪比例时,裁剪框自动撑满

切换裁剪比例时,现在的逻辑是保持宽度不变,高度做变化,如果高度超过最大高度,则会改变宽度;你是希望切换比例,自动设置为最大宽高吗? 第二个问题,现在逻辑是保持原有宽高做填充;你希望更新画布上原有尺寸对吗?

nihaojob commented 1 week ago

一个是 切换裁剪比例时,裁剪框自动撑满

切换裁剪比例时,现在的逻辑是保持宽度不变,高度做变化,如果高度超过最大高度,则会改变宽度;你是希望切换比例,自动设置为最大宽高吗? 第二个问题,现在逻辑是保持原有宽高做填充;你希望更新画布上原有尺寸对吗?

第一个问题,是否可以做成判断图片宽高和裁剪比例的宽高计,计算铺满的比例?大部分电商的截图,主要是为了让用户少一次操作。

第二个问题,现在回填完以后,图片已经变形,是否可以删除原图片,直接插入一个新的图片。

👍👍👍

x007xyz commented 1 week ago

一个是 切换裁剪比例时,裁剪框自动撑满

切换裁剪比例时,现在的逻辑是保持宽度不变,高度做变化,如果高度超过最大高度,则会改变宽度;你是希望切换比例,自动设置为最大宽高吗? 第二个问题,现在逻辑是保持原有宽高做填充;你希望更新画布上原有尺寸对吗?

第一个问题,是否可以做成判断图片宽高和裁剪比例的宽高计,计算铺满的比例?大部分电商的截图,主要是为了让用户少一次操作。

第二个问题,现在回填完以后,图片已经变形,是否可以删除原图片,直接插入一个新的图片。

👍👍👍

第一个问题,切换铺满没啥问题 第二个问题,删除原图片新图片如何插入呢?原图片的左上角作为原点,还是原图片的中心点位置作为原点插入?

nihaojob commented 1 week ago

可以参考下这个代码哈 https://github.com/ikuaitu/vue-fabric-editor/blob/main/src/components/myMaterial/uploadMaterial.vue#L101-L106

nihaojob commented 1 week ago

@x007xyz 大佬真高效,👍👍👍 ,您加一下我微信,13146890191 发我一下收货地址 我这边下单有邮过去

x007xyz commented 1 week ago

已加,微信同头像

nihaojob commented 1 week ago

image 已下单,🤝🤝。