位置: 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的教程(织梦系统如何更换网站内容)

  • 剪映边框素材怎么添加(剪映边框素材怎么扣掉中间部分)

    剪映边框素材怎么添加(剪映边框素材怎么扣掉中间部分)

  • 键盘怎么无法识别(键盘为什么无法识别)

    键盘怎么无法识别(键盘为什么无法识别)

  • iqooneo支持红外线吗(iqoo neo5支持红外线)

    iqooneo支持红外线吗(iqoo neo5支持红外线)

  • 抖音草稿怎么再次剪辑(抖音草稿怎么再编辑一遍)

    抖音草稿怎么再次剪辑(抖音草稿怎么再编辑一遍)

  • 邮件是什么类型数据(邮件是什么类型数据噪声数据)

    邮件是什么类型数据(邮件是什么类型数据噪声数据)

  • 美图秀秀拍视频能拍多久(美图秀秀拍视频没保存怎么找回)

    美图秀秀拍视频能拍多久(美图秀秀拍视频没保存怎么找回)

  • 小米画报可以删除吗(小米画报删了有事吗)

    小米画报可以删除吗(小米画报删了有事吗)

  • 快手有赞订单怎么没了(快手有赞订单怎么查询)

    快手有赞订单怎么没了(快手有赞订单怎么查询)

  • 取sim卡需要关机吗(手机取sim卡要关机吗)

    取sim卡需要关机吗(手机取sim卡要关机吗)

  • 苹果手机LTE怎么弄成4g(苹果手机lte怎么改成4g 个人热点)

    苹果手机LTE怎么弄成4g(苹果手机lte怎么改成4g 个人热点)

  • che-tl00h是什么型号(che_tl00)

    che-tl00h是什么型号(che_tl00)

  • 淘宝帮买消息对方看得见吗(淘宝收到帮买信息)

    淘宝帮买消息对方看得见吗(淘宝收到帮买信息)

  • 京东买家如何修改评价(京东修改)

    京东买家如何修改评价(京东修改)

  • 小米8sn码几位数(小米8串码)

    小米8sn码几位数(小米8串码)

  • 抖音发布后还能修改吗(抖音发布后还能加标题吗)

    抖音发布后还能修改吗(抖音发布后还能加标题吗)

  • 11和11pro手机壳有区别吗(iphone 11和11 pro手机壳)

    11和11pro手机壳有区别吗(iphone 11和11 pro手机壳)

  • 笔记本home怎么按(笔记本home怎么设置)

    笔记本home怎么按(笔记本home怎么设置)

  • 微信无法打开网页是怎么回事(微信无法打开网页是什么意思)

    微信无法打开网页是怎么回事(微信无法打开网页是什么意思)

  • 手机微博如何删除分组(手机微博如何删除浏览记录)

    手机微博如何删除分组(手机微博如何删除浏览记录)

  • 小米手机6支持快充吗(小米手机6支持电信卡吗)

    小米手机6支持快充吗(小米手机6支持电信卡吗)

  • 苹果11有几个卡槽(苹果11有几个卡槽在哪个位置)

    苹果11有几个卡槽(苹果11有几个卡槽在哪个位置)

  • pentium2是多少位(pentium ii)

    pentium2是多少位(pentium ii)

  • airpods无线充电盒有必要买吗(airpods无线充电盒和充电盒区别)

    airpods无线充电盒有必要买吗(airpods无线充电盒和充电盒区别)

  • 换了号码微信还能用吗(换了号码微信还能找回吗)

    换了号码微信还能用吗(换了号码微信还能找回吗)

  •  oppo怎么解除禁止安装权限(oppo怎么解除禁止自动读取验证码)

    oppo怎么解除禁止安装权限(oppo怎么解除禁止自动读取验证码)

  • 小米8青春版电池容量(小米8青春版电池不耐用怎么办)

    小米8青春版电池容量(小米8青春版电池不耐用怎么办)

  • 最强的笔记本是什么(最强笔记本2021)

    最强的笔记本是什么(最强笔记本2021)

  • CSDN独家原创《芒果YOLO改进高阶指南》适用YOLOv5、YOLOv7、YOLOv8等改进专栏,来自人工智能专家老师联袂推荐(csdn创作激励)

    CSDN独家原创《芒果YOLO改进高阶指南》适用YOLOv5、YOLOv7、YOLOv8等改进专栏,来自人工智能专家老师联袂推荐(csdn创作激励)

  • 单位收到已交个税的劳务发票还需要申报个税吗
  • 其他权益工具投资借贷方向
  • 个人去税务局开专票需要提供什么
  • 分支机构属于小型微利企业吗
  • 没发票的费用怎么做账
  • 转让实物资产税务处理
  • 结存材料物资会计分录怎么做?
  • 库存商品毁损会导致什么
  • 发现以前年度少计提税金
  • 拆迁车间
  • 补缴以前年度养老保险能否税前扣除
  • 母公司给子公司担保需要决议吗
  • 个人持有原始股要交税吗
  • 税后工资反推税前工资计算方法
  • 园林设计开票
  • 电子税务局报表打印在哪里
  • 详解出口退税的涵义
  • 商场 折扣
  • 企业汇算清缴后还能更正吗
  • 印花税计税金额是含税还是不含税
  • 成品油属于什么费用
  • autorun.exe
  • win10多任务分屏怎么关闭
  • 涉税服务实务重点总结
  • php获取变量长度
  • PHP:mime_content_type()的用法_fileinfo函数
  • 邮政电信卡
  • 受托代销商品会计分录受托方
  • 科尼西卡神庙在哪里
  • 小规模纳税人收入会计分录
  • 小型微利企业减免所得税计算公式
  • 增值税核算账务处理办法
  • 北坡镇人民政府
  • 微信小程序在哪里找?
  • 序列标注技术应用
  • 微信小程序游戏手游排行榜
  • java聚合工程
  • 配件出口可以退税吗
  • 增值税不动产扣除项目
  • 会引起所有者权益总额变动的是
  • 金税盘减免税款借方余额
  • 金蝶kis资产负债表中预付款项年初余额公式怎么设置?
  • DEDECMS php.ini register_globals must is Off!如何解决
  • 自查补税行为有哪些方面
  • 制作费开票属于什么编码类型
  • 用友t3资产负债表怎么生成季报
  • 固定资产投资额是指什么
  • Ubuntu上安装jdk
  • 旧设备入账
  • 物业管理费专票税率是多少
  • 冲减当期利润
  • 厂家给经销商的活动方案怎么写
  • 个人出租不动产月租金不超10万免税
  • 无形资产与固定资产一样都会存在实体性贬值
  • 财务报表中预收账款
  • 定额发票累计领取怎么算
  • 一次性购买多张火车票
  • mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database
  • linux安装mailx
  • Win10虚拟内存怎么转移
  • macbookair网页全屏
  • win8怎么设置定时关机
  • 32位/64位Win10系统开机后桌面图标自动排列的解决办法
  • centos必学的60个命令
  • fedora系统安装软件
  • win7旗舰版提示不是正版
  • Win10 Mobile 10586.63截图曝光:或为正式推送版本
  • win8资源管理器未响应
  • [置顶]电影名字《收件人不详》
  • css自学
  • 详解16型人格
  • linux BASH shell下设置字体及背景颜色
  • javascriptj
  • 内存优化有哪些方法
  • nodejs 入门
  • jQuery的ajax和遍历数组json实例代码
  • 企业吸收合并资质转移办理
  • 国家税务网上办税服务厅官网
  • 个人经营所得申报时间
  • 岗位大练兵业务大比武简报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设