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 相关文章推荐
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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巧获服务器端信息
2006/12/06 PHP
使用PHP编写的SVN类
2013/07/18 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
JS 自执行函数原理及用法
2019/08/05 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python实现文件快照加密保护的方法
2015/06/30 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python实现各进制转换的总结大全
2017/06/18 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Django url 路由匹配过程详解
2021/01/22 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
中年人生感言
2014/02/04 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2015学校年度工作总结
2015/05/11 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers