基于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);