位置: IT常识 - 正文

canvas实现图片标记(canvas实现图片编辑)

编辑:rootadmin
前言 由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑 但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo,作为记录,同时你们在开发过程中有类似需求的话也可以参考一下该思路,其 ... 前言

推荐整理分享canvas实现图片标记(canvas实现图片编辑),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:canvas图表,canvas绘制图片的方法,canvas在图片上绘制图形,canvas图表,canvas在图片上绘制图形,canvas实现图片标注,canvas实现图片标注,canvas显示图片,内容如对您有帮助,希望把文章链接给更多的朋友!

由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo,作为记录,同时你们在开发过程中有类似需求的话也可以参考一下该思路,其中有不足之处还请指出来。

实现目标canvas实现图片标记(canvas实现图片编辑)

1、定点缩放。2、图片拖拽。3、图片中绘制点、直线、矩形、圆形、多边形。4、上传原图。5、下载标注图。6、记录标记数据。

具体效果

这是在线浏览地址。这是源码地址。

实现思路

项目是纯原生canvas实现的,没使用任何其他插件。由于canvas没有图层的概念,实现切换不同的绘制模式时有一点麻烦。具体方案是:分别单独存下每次绘制的数据,再将该数据添加到一个大列表中(如下图中的canvasData),每次绘制图形时都需要重绘该大列表,若需要操作绘制的图形,则变动大列表中对应的数据后重绘即可。

具体逻辑

1、绑定事件。先添加画布canvas,并指定画布尺寸与绑定各种事件:滚轮事件(mousewheel)、右键事件(contextmenu)、鼠标按下事件(mousedown)、鼠标松开事件(mouseup)、鼠标移动事件(mousemove)、双击事件(dblclick)。2、绘制模式。该功能有五种绘图模式:点模式、直线模式、矩形模式、多边形模式、圆形模式。点模式最简单,在鼠标松开事件中绘制点,然后获取到坐标,最后将数据添加到大列表中。其中canvas绘制点的方法如下,其实就是利用ctx.arc绘制一个实心圆,arc四个参数分别为圆心坐标x、y、半径、起始角度、终止角度。直线模式的绘制是在鼠标移动事件中,移动时不停的调用ctx.clearRect清除绘制的图形,然后再不停的绘制大列表的数据,鼠标松开后将再将直线绘图数据添加到大列表中,从而实现拖拽画线的效果。canvas绘制直线的方法如下,其中最主要的便是ctx.lineTo方法。矩形模式的绘制与直线绘制一样,也是放在鼠标移动事件中的。拖拽即可绘制出矩形。具体canvas绘制矩形的方法如下,其中ctx.strokeRect方法四个参数分别为矩形左上角的x、y坐标,矩形长度、矩形宽度。多边形绘制模式比较麻烦一点。我设计的操作模式是,右键依次点击多边形的顶点,最后需要闭合时双击左键即可完成绘制,闭合多边形,将多边形数据添加到大列表中。这样只需判断每次点击绘制时是否闭合即可,双击事件处理如下。圆形模式绘制的绘制与点的绘制类似,也是使用ctx.arc。不同的是圆需要计算半径,在鼠标松开的一瞬间记录下坐标,使用该坐标平方后再开根即可计算出半径。具体绘制方法如下。

3、定点缩放。需要保证鼠标中心位置与图片比例不能改变,该功能是绑定鼠标滚动事件的,每次缩放时需要重新计算比例与坐标,重绘大列表的数据,这是滚动事件的处理,需要注意事件中wheelDelta值的正负。这是改变画布的方法,画布尺寸是通过缩放倍数与原图尺寸控制的,画布位置是通过旧位置加偏移量来控制的。需要限制缩放倍数的话控制maxZoom与minZoon即可。4、图片拖拽。该功能的实现则比较简单,点击左键后打开限制拖拽的状态,记录拖拽偏移量。鼠标移动时,实时改变画布的top与left即可(这里是通过position: absolute;定位的)。5、上传原图。这里的上传并不是上传到服务器中,而是利用input type="file"选取文件到浏览器中处理,需要限制为只选取图片,使用accept="image/jpeg"属性。其中上传的方法如下,需要限制文件大小,然后通过createObjectURL获取到url(该url比较特殊,只在当前dom页面中有效)。最后通过loadBgImg方法返回一个img,页面中即可使用该图片,从而实现“上传”。6、下载标注图。值得注意的是为防止标记错位,需要下载前需要将图片尺寸位置还原,然后再获取页面中canvas的DOM,然后通过toDataURL获取到base64。将该base64生成转化为Blob,然后创建事件,使用a标签下载,路径仍然使用createObjectURL获取。7、记录标记数据。记录标记数据的好处是,将来若需要单独编辑每个标记,则可以直接改变记录下的数据,然后重绘该数据即可。记录数据的逻辑是写在鼠标松开事件中的,每次绘制完标记后都需要将绘图数据push到大列表中。

结语

在开发过程中我还是踩了很多坑的,文章中记录的只是很少的一部分。还是建议看文章开头的项目源码链接,源码中我写了大量详细的注释。

本文链接地址:https://www.jiuchutong.com/zhishi/310571.html 转载请保留说明!

上一篇:vue如何给组件动态绑定不同的事件(vue移动组件)

下一篇:织梦DEDECMS修改模板默认扩展名为.html的教程(织梦系统如何更换网站内容)

  • 格力空调强劲模式怎么开(格力空调强劲模式怎么关闭没有显示)

    格力空调强劲模式怎么开(格力空调强劲模式怎么关闭没有显示)

  • 小米体重秤2怎么开机(小米体重秤2怎么连接手机)

    小米体重秤2怎么开机(小米体重秤2怎么连接手机)

  • ipx4级防水表示什么(ipx4级防水是什么意思)

    ipx4级防水表示什么(ipx4级防水是什么意思)

  • 怎样去掉抖音视频里的水印(怎样去掉抖音视频的水印)

    怎样去掉抖音视频里的水印(怎样去掉抖音视频的水印)

  • 为荣耀20Pro手机下载的音乐在哪里找(荣耀20pro手机电池的健康度呢怎么设置)

    为荣耀20Pro手机下载的音乐在哪里找(荣耀20pro手机电池的健康度呢怎么设置)

  • 苹果拍视频功能不见了(苹果拍视频功能不见了怎么恢复只有拍照)

    苹果拍视频功能不见了(苹果拍视频功能不见了怎么恢复只有拍照)

  • 淘宝活跃度在哪里看(淘宝活跃度在哪查看)

    淘宝活跃度在哪里看(淘宝活跃度在哪查看)

  • 拼多多步数兑换健康金规则(拼多多步数兑换30元提现规则)

    拼多多步数兑换健康金规则(拼多多步数兑换30元提现规则)

  • 钉钉null是什么意思(钉钉的出现)

    钉钉null是什么意思(钉钉的出现)

  • 怎么查看基带是否正常(如何看基带)

    怎么查看基带是否正常(如何看基带)

  • 系统对www网页存储的默认格式是

    系统对www网页存储的默认格式是

  • xs支持反向无线充电吗(iphonex有没有反向无线充电)

    xs支持反向无线充电吗(iphonex有没有反向无线充电)

  • 手机蓝牙怎么连接电脑蓝牙(手机蓝牙怎么连接音响)

    手机蓝牙怎么连接电脑蓝牙(手机蓝牙怎么连接音响)

  • 苹果11wifi自动断开(苹果11wifi老是自动断开怎么回事)

    苹果11wifi自动断开(苹果11wifi老是自动断开怎么回事)

  • 计算机中加减乘除叫什么键(计算机中加减乘除统称什么键)

    计算机中加减乘除叫什么键(计算机中加减乘除统称什么键)

  • 华为p30有没有红外线(华为p30有没有红外线功能)

    华为p30有没有红外线(华为p30有没有红外线功能)

  • 微信怎么分享软件(微信怎么分享软件vivo)

    微信怎么分享软件(微信怎么分享软件vivo)

  • 电脑辐射大吗(平板电脑辐射大吗)

    电脑辐射大吗(平板电脑辐射大吗)

  • 抖音四格特效在哪里(抖音特效四宫格怎么弄)

    抖音四格特效在哪里(抖音特效四宫格怎么弄)

  • 爱奇艺会员兑换劵怎么用(一天爱奇艺会员兑换)

    爱奇艺会员兑换劵怎么用(一天爱奇艺会员兑换)

  • oppo手机打印机在哪(oppo手机打印机怎么连接)

    oppo手机打印机在哪(oppo手机打印机怎么连接)

  • x27vivo人脸识别设置在哪(vivo x27人脸识别)

    x27vivo人脸识别设置在哪(vivo x27人脸识别)

  • 怎么样解绑滴滴(怎么样解绑滴滴自动扣款)

    怎么样解绑滴滴(怎么样解绑滴滴自动扣款)

  • cad弧长快捷键(cad测量弧长命令)

    cad弧长快捷键(cad测量弧长命令)

  • 无线路由器温度过高怎么办(无线路由器温度范围)

    无线路由器温度过高怎么办(无线路由器温度范围)

  • 销售企业进货会计分录
  • 代销返点怎么交税费
  • 城建税计税依据扣除增值税期末留抵
  • 实收资本变动额怎么算
  • 个人所得税申报密码如何设置
  • 餐饮业可以开增值税专用发票吗?
  • 公司股权关系怎么填写
  • 取暖费摊销期限是多少年
  • 不动产净值包括增值税吗
  • 股东个人向公司借款会计分录
  • 超额投资是什么意思
  • 资本溢价能不能退还股东呢
  • 环评费用包括哪些
  • 出口发票上的汇率填什么
  • 汽车公司场地租金怎么算
  • 砂石建筑材料验收规范
  • 税款滞纳金怎么入账
  • 利税总额含企业所得税吗
  • 个人转支票属于什么业务
  • 转回已确认固定资产减值损失的会计处理怎么做?
  • 股权转让股权公告范本
  • 无形资产摊余价值不含减值
  • Windows11怎么连接网络
  • 苹果双系统不小心删了苹果系统
  • 安全中心总是弹出来
  • 在windows 7中
  • 对方已经认证的红字发票怎么开
  • 出租固定资产收入计入什么科目
  • 税收分类编码怎么添加
  • 应缴纳增值税的公式
  • 金银首饰零售业必须为一般纳税人吗
  • 出口货物如何开票入账
  • 导航菜单是什么
  • 薰衣草 英国
  • ✝️ 强制 Vue 重新渲染组件的正确方法
  • 律师异地办案家属要跟着吗
  • 建设期需要流动资金吗
  • 机关事业单位体检费用标准规定
  • random_state=123
  • 前端 高级
  • it云化
  • ubuntu系统删除
  • 车保险费中的车险是什么
  • 出口退税退下来还得缴税吗
  • 使用van-picker 动态设置当前选中项
  • 应付账款可以用预收账款代替嘛
  • 红字记账是什么意思
  • 帝国cms使用手册
  • 网站升级改造方案
  • 交易性金融资产属于什么科目
  • 劳务派遣业务的特点
  • 增值税发票抵扣联的作用
  • 无偿借贷什么意思
  • 汇算清缴可以不调整吗
  • 固定制造费用需要逐项进行预计通常与本期产量无关
  • 有借款合同还要写借条吗
  • 什么混合销售
  • 预提福利费
  • 人工费没有发票怎么办
  • 固定资产的入账时间应该是什么时间
  • 出纳账户怎么设置
  • chrome浏览器81.0
  • windowsxp锁屏密码怎么设置
  • fedora最新版本
  • 电脑总是关不了怎么办
  • window102021年更新计划
  • win10registry
  • backtracker
  • 实现原生的ajax
  • 深入了解的高级表达
  • android 系统app权限
  • 举例详解民法典第994条
  • python脚本运行命令
  • android实现底部菜单
  • Python selenium 父子、兄弟、相邻节点定位方式详解
  • 安卓cts认证
  • 江苏国家税务机关电话
  • 破产重整期间的税收
  • 上市公司季报有哪些内容
  • 四川地方税务局官网首页
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设