vue组件：canvas实现图片涂鸦功能

roland_reed 发布于2019-08-23 12:37 / 3661人阅读

摘要：方案背景需求需要对图片进行标注，导出图片。对应方案用实现涂鸦圆形矩形的绘制，最终生成图片编码用于上传大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。

方案背景

需求

需要对图片进行标注，导出图片。

需要标注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缓存的问题，在图片路径后面拼个随机码就可以解决。

idc机房托管超融合服务器 html5实现涂鸦板 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98838.html

利用vue制作在线涂鸦板

摘要：撤销清空等操作撤销前进清空清空前后数据恢复到默认数据地址查看代码效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API简介调用方法 getImageData() 返回ImageData对象，该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据（从指定的 Imag...

nemo 2019-08-20 13:29 评论0 收藏0
知识库 - 收藏集 - 掘金

摘要：进程间通信详解掘金最近项目有进程间通信的需求，我使用的是通信的方式，这是中很传统的一种进程间通信的方式，在这里分享给大家。使用图片加载框架最详细的使用指南掘金写在前面中有几个比较有名的图片加载框架，和。 Android 进程间通信 AIDL详解 - 掘金最近项目有进程间通信的需求，我使用的是IPC通信的方式，这是Android中很传统的一种进程间通信的方式，在这里分享给大家。进程间通...

loonggg 2019-06-25 11:26 评论0 收藏0
Canvas 涂鸦

摘要：第二步，消除涂鸦锯齿的办法简单的绘制和图片保存完成了，但是在这种情况下，线条会有很明显的锯齿灵魂画手来了。在经过搜索查阅之后，发现有一个绘制办法可以降低锯齿的问题。橡皮擦的原理是，将橡皮绘制的路径覆盖到原来的画笔上。第一步，我们先实现简单的绘制，并且在绘制之后将图片保存到本地 var canvas = document.getElementById(canvas), ...

thekingisalwaysluc 2019-08-21 17:01 评论0 收藏0
基于 vue-upload-component 封装一个图片上传组件

摘要：预览因为项目是基于做的，本身就提供了的预览组件，使用起来也简单，如果业务需求需要放大缩小，这个组件就不满足了。需求分析业务要求，需要一个图片上传控件，需满足多图上传点击预览图片前端压缩支持初始化数据相关功能及资源分析基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到...

wangbjun 2019-08-23 12:22 评论0 收藏0
vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0