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 中对象的继承〔转贴〕
Jan 22 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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文件操作实现代码分享
2011/09/01 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php cli换行示例
2014/04/22 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
javascript 简练的几个函数
2009/08/29 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python实战购物车项目的实现参考
2019/02/20 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
推荐信格式要求
2014/05/09 职场文书
法律专业自荐信
2014/06/03 职场文书
售房委托书
2014/08/30 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技