摘要：方案背景需求需要对图片进行标注，导出图片。对应方案用实现涂鸦圆形矩形的绘制，最终生成图片编码用于上传大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。
方案背景
需求
需要对图片进行标注，导出图片。
需要标注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缓存的问题，在图片路径后面拼个随机码就可以解决。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98838.html
摘要：撤销清空等操作撤销前进清空清空前后数据恢复到默认数据地址查看代码 效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API简介 调用方法 getImageData() 返回ImageData对象，该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据（从指定的 Imag...
摘要：第二步，消除涂鸦锯齿的办法简单的绘制和图片保存完成了，但是在这种情况下，线条会有很明显的锯齿灵魂画手来了。在经过搜索查阅之后，发现有一个绘制办法可以降低锯齿的问题。橡皮擦的原理是，将橡皮绘制的路径覆盖到原来的画笔上。 第一步，我们先实现简单的绘制，并且在绘制之后将图片保存到本地 var canvas = document.getElementById(canvas), ...
摘要：预览因为项目是基于做的，本身就提供了的预览组件，使用起来也简单，如果业务需求需要放大缩小，这个组件就不满足了。 需求分析 业务要求，需要一个图片上传控件，需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到...
摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。 项目简介 本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖 使用九宫格进行裁剪，自由选择裁剪区域。 实时预览裁剪后效果。 可以将裁剪好的图片，...
阅读 1038·2019-08-30 12:57
阅读 2112·2019-08-30 11:11
阅读 2177·2019-08-29 15:20
阅读 1868·2019-08-29 14:12
阅读 3272·2019-08-28 17:51
阅读 2376·2019-08-26 13:23
阅读 785·2019-08-26 10:34
阅读 3843·2019-08-23 12:37
