萌新请教一个图片操作的问题

[tediorelee]

之前写的基本都是管理系统啥的，框架用的 vue，现在有个需求是对图片的操作，大概有图片的旋转，放大缩小，还有就是在图片上进行文字标注（这个不知道该怎么实现）并支持保存本地

有没有大佬了解这种相关功能实现的？

[yaphets666]

旋转，放大缩小 这个好说 computed return 一个 css 样式对象 绑定到相关模板上就可以了 文字标注还能保存到本地 这个估计要 canvas

[wotemelon]

konva 直接干

[wotemelon]

给你参考下，N 年没更新了，https://github.com/wotermelon/vue-painting

[renmu123]

提供一个思路，用 canvas 来进行处理，可以试一下 fabric 框架（我觉得文档写得不咋地），你要的旋转，放大，标注和导出（甚至还能压缩）都可以比较简单实现

[tediorelee]

@wotemelon 收到，感谢帮助

[tediorelee]

@renmu123 谢谢大佬，fabric 这就去看

[DL9412]

直接搞一个 background 是图片，相对定位的 div，旋转放大缩小直接 css 搞定。

纯文字标注的话，通过监控鼠标事件的坐标，在对应坐标位置画绝对定位的文本框，最后直接用 html2canvas 把整个 div 抓成图片

在上家做过类似需求，不过是在图片上添加翻译文本图层，css 能画出来的什么方框圆形三角之类的也可以。
如果需要不规则形状标记的话，那估计还是得 canvas 绘制了

[tediorelee]

@DL9412 很有帮助！