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 相关文章推荐
Javascript Object.extend
May 18 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
实例讲解python函数式编程
2014/06/09 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python yield关键词案例测试
2019/10/15 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python变量的作用域是什么
2020/05/26 Python
Python with语句用法原理详解
2020/07/03 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
晨会主持词
2014/03/17 职场文书
施工质量承诺书范文
2014/05/30 职场文书
入伍通知书
2015/04/23 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android