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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
移动端界面的适配
Jan 11 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
JS实现鼠标移动拖尾
Dec 27 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
杏林同学录(三)
2006/10/09 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php支付宝APP支付功能
2020/07/29 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
js function定义函数使用心得
2010/04/15 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
图解js图片轮播效果
2015/12/20 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
浅析python递归函数和河内塔问题
2017/04/18 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python tkinter模版代码实例
2020/02/05 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
开展创先争优活动总结
2014/08/28 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
先进事迹材料范文
2014/12/29 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
PL350与SW11的比较
2021/04/22 无线电
Django分页器的用法你都了解吗
2021/05/26 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android