扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下canvas如何实现图片涂鸦功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联公司专注于中大型企业的网站建设、成都网站建设和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户上千多家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注高端网站设计和互联网程序开发，在前进的路上，与客户一起成长！
需求
需要对图片进行标注，导出图片。
需要标注N多图片最后同时保存。
需要根据多边形区域数据（区域、颜色、名称）标注。
对应方案
用canvas实现涂鸦、圆形、矩形的绘制，最终生成图片base64编码用于上传
大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形、矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。
多边形区域的显示是根据坐标点绘制，名称显示的位置为多边形质心。
必须传入的参数
图片路径
url: string
绘图区域宽度
width: string
绘图区域高度
height: string
选择传入的参数
是否可以绘制,默认true
canDraw: boolean
坐标点信息,不传入则不绘制
info: string
是否可绘制，默认true
canDraw: boolean
绘图颜色，默认red
lineColor: string
绘图笔宽度，默认2
lineWidth: number
绘图笔类型，rec、circle，默认rec
lineType: string
可以调用的方法
清空画布
clean()
返回坐标点信息
getInfo()
特殊说明
canvas对象不能获得坐标,是通过父元素坐标获取的，所以该组件的父元素以上的层级不能有太多的定位、嵌套，否则绘制坐标会偏移。
域名不同的图片可能存在跨域问题，看过很多资料没有太好的办法，最后项目中是用node服务做了一个图片转为base64的接口，再给canvas绘制解决的。并不一定适用于其他项目，如果有更好的办法解决欢迎分享。
导出坐标点数据只能导出规则图案的坐标点，因为随意涂鸦的坐标点太多时会崩溃的（虽然没试过具体到什么程度会崩溃），如果有高性能的实现方式欢迎分享。
如果涂鸦后保存再请求图片url出现请求不到的情况，是因为cdn缓存的问题，在图片路径后面拼个随机码就可以解决。
以上是canvas如何实现图片涂鸦功能的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网