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实现二分查找法实现代码
Nov 12 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
根德YB400的电路分析
2021/03/02 无线电
缓存技术详谈―php
2006/12/14 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
项目经理岗位职责
2013/11/11 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
计算机教师工作总结
2015/08/13 职场文书
python实现自动化群控的步骤
2021/04/11 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
vue elementUI批量上传文件
2022/04/26 Vue.js