Vue使用Canvas绘制图片、矩形、线条、文字,下载图片


Posted in Javascript onApril 26, 2019

1 前言

1.1 业务场景

图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域。

由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开。

2 实现原理

2.1 绘制画布

<el-dialog
  title="查看图片"
  :visible.sync="dialogJPG"
  append-to-body>
  <canvas id="mycanvas" width="940" height="570"></canvas>
</el-dialog>

这里为了交互体验,使用了 element-ui 的弹窗方式。将canvas画布放到了弹窗中。

为了突出画布效果可以在css中设置一个边框。

#mycanvas {
  border: 1px solid rgb(199, 198, 198);
}

2.2 绘制图片

// imageUrl为后台提供图片地址
doDraw(imageUrl){
  // 获取canvas
  var canvas = document.getElementById("mycanvas")
  // 由于弹窗,确保已获取到
  var a = setInterval(() =>{
    // 重复获取
    canvas = document.getElementById("mycanvas")
    if(!canvas){
     return false
    } else {
      clearInterval(a)
      // 可以理解为一个画笔,可画路径、矩形、文字、图像
      var context = canvas.getContext('2d')
      var img = new Image()
      img.src = imageUrl
      // 加载图片
      img.onload = function(){
        if(img.complete){
          // 根据图像重新设定了canvas的长宽
          canvas.setAttribute("width",img.width)
          canvas.setAttribute("height",img.height)
          // 绘制图片
          context.drawImage(img,0,0,img.width,img.height)
        }
      }
    }
  },1)
},

context.drawImage() 方法的参数介绍,可参照 W3school

2.3 绘制矩形

context.strokeStyle = "red"
context.lineWidth = 3;
context.strokeRect(x, y, width, height)

context 同上面的定义

strokeStyle 矩形颜色

lineWidth 矩形边框宽度

x,y,width,height 矩形位置加长宽

2.4 绘制线条

context.moveTo(x1,y1) 
context.lineTo(x2,y2)
context.strokeStyle = "red"
context.lineWidth = 3;
context.stroke()

(x1,y1) (x2,y2) 线条的起点和终点坐标

strokeStyle lineWidth 线条的样式

2.5 绘制文字

context.font = "26px Arial bolder"
context.fillStyle = 'red'
context.fillText(text,x,y)

font fillStyle 文字样式

text 文字内容

x,y 文字显示坐标

2.6 下载图片

// 图片地址和图片名称
downIamge (imgsrc, name) { 
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function () {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    let url = canvas.toDataURL('image/jpg') 
    let a = document.createElement('a')
    let event = new MouseEvent('click')
    a.download = name
    a.href = url
    a.dispatchEvent(event)
  }
  image.src = imgsrc
},

3 后记

这里只是列出canvas的基础使用,具体的交互和展示还需要更多的设计。

总结

以上所述是小编给大家介绍的Vue使用Canvas绘制图片、矩形、线条、文字,下载图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
javascript判断office版本示例
Apr 11 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
input框中的name和id的区别
Nov 16 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 #Javascript
js验证身份证号码记录的方法
Apr 26 #Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 #Javascript
react高阶组件添加和删除props
Apr 26 #Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 #Javascript
vue 进阶之实现父子组件间的传值
Apr 26 #Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
财政专业求职信范文
2014/02/19 职场文书
事务机电主管工作职责
2014/02/25 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
解决Redis启动警告问题
2022/02/24 Redis
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
box-shadow单边阴影的实现
2023/05/21 HTML / CSS