Vue+Canvas绘图使用的讲解

目录

• Vue使用Canvas绘图
• 1、前言
• 2、实现原理
• Vue使用Canvas的小demo
• 顺便总结一波

Vue使用Canvas绘图

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>
 
//为了突出画布效果可以在css中设置一个边框。
#mycanvas {
    border: 1px solid rgb(199, 198, 198);
}

这里为了交互体验，使用了element-ui的弹窗方式。将canvas画布放到了弹窗中。

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
},

Vue使用Canvas的小demo

今天接到一个需求，在vue+element管理后台中新增一个保存canvas图片的需求，所以先写了一个小demo

// html中
<div class="contain">
	<canvas id="myCanvas" width="500" height="500" ref="myCanvas"></canvas>
</div>

// js中
drowCanvas () {
    let myCanvas = this.$refs.myCanvas
    //画布的宽高
    let Cwidth = 500
    let CHeight = 500
    // 创建一个画布上绘图的环境
    var ctx = myCanvas.getContext('2d')
    // 一般情况下，canvas的背景颜色是透明的，当生成图片的时候也是透明
    // 如果希望图片有个背景颜色，可以创建一个框高100%的矩形
    // 画布的最底端-这样就可以有个背景颜色
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, Cwidth, CHeight);

    //设置颜色也可以适用rgba
    ctx.fillStyle = 'rgba(0,0,0,0.9)'
    //绘制一个矩形的边框(x, y, width, height)
    ctx.strokeRect(50, 100, 100, 100)

    // 可以在页面插入文字
    ctx.fillStyle = '#333'

    // 三个参数-文字，横坐标-纵坐标
    ctx.font = '16px Arial'
    ctx.fillText('今天是个好日子', 50, 50);
    ctx.fillText('心想的事儿都能成', 50, 80);

    // 绘制一个实心的方块
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(200, 30, 80, 50);

    // 还可以插入图片
    // 首先创建一个图片标签
    // 然后插入图片
    let imgObj = new Image()
    imgObj.src = 'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290'
    // let imgUrl = this.imgOnload(imgObj)
    imgObj.onload = function () {
    	// 关于坐标问题
    	// 一般绘制图片，只是画上去，这里外层canvas是500*500，相当于居中了，只是
    	// 被裁剪了
    	// 从图片的593,327 坐标开始截图，截取 500，500 这么大
		// 然后将截取的图片，从canvas 100，100开始画， 缩放 300，300 这么大！
        ctx.drawImage(imgObj, 593,327,500,500,100,100,300,300)
    }

    // 生成图片（图片的格式）
    let imageUrl = myCanvas.toDataURL("image/png", 0.5);
    // base64图片地址就获取到了
    // 现实中存在两种情况，一个显示页面中，点击下载，这个就简单了，可以利用a标签进行下载
    //还有一种情况就是，图片base64地址生成后，自动下载
    // 调用方法下载canvas
    this.downloadFile(imageUrl, '1.png')
},
// 创建下载图片事件
downloadFile(data, filename) {
   //创建一个具有指定的命名空间URI和限定名称的元素
   var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
   save_link.href = data;
   save_link.download = filename;
   // 绑定下载事件
   var event = document.createEvent('MouseEvents');
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false,         false, false, 0, null);
   save_link.dispatchEvent(event);
},

绘制出来的canvas图片有点丑

不过还是只是样式问题，下载也可以正常试用，只需要吧代码套到具体的业务需求里面去就可以了

顺便总结一波

绘制图片的时候传参的问题

	/*3参数*/
    /*图片对象*/
    /*绘制在画布上的坐标 x y*/
    //ctx.drawImage(image,100,100);

	/*5个参数*/
    /*图片对象*/
    /*绘制在画布上的坐标 x y*/
    /*是图片的大小  不是裁剪  是缩放*/
    //ctx.drawImage(image,100,100,100,100);
    /*9个参数*/
    /*图片对象*/
    /*图片上定位的坐标  x y */
    /*在图片上截取多大的区域  w h*/
    /*绘制在画布上的坐标 x y*/
    /*是图片的大小  不是裁剪  是缩放*/
    ctx.drawImage(image,400,400,400,400,200,200,100,100);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。