canvas绘图并下载

发表于 | 分类于

canvas绘制图片并下载,结合vue：
第一步：html代码

1
2
3
4
5
6
7
<div class="canvas_wrapper">
    <canvas id="canvas1" width="180px" height="180px"></canvas>
    <br /><br />
    <input type="button" value="保存png图片" id="btn1"  @click="download('png')"/>
    <input type="button" value="保存jpg图片" id="btn2" @click="download('jpg')"/>
 </div>



第二步：引入img路径
1
2
import backgroundImg from "@/assets/images/user_img.jpeg";

第三步：js方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//初始化，绘制图片
init:function(){
  let _this=this;
  //绘制图片
  let canvas = document.getElementById('canvas1');
  let ctx = canvas.getContext('2d');
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "red";

  //将图片画在画布上
  let image = new Image();
  image.src = backgroundImg;
  image.onload = function() {
    ctx.drawImage(image, 0, 0, 180, 180);

    ctx.font = 'italic bold 15px Helvetica ';
    ctx.fillText('点点', 20, 20);

  }

},
//图片下载操作,指定图片类型
download:function (type) {
   let _this=this;
   var canvas = document.getElementById('canvas1');
    //设置保存图片的类型
    var imgdata = canvas.toDataURL(type);
    //将mime-type改为image/octet-stream,强制让浏览器下载
    var fixtype = function (type) {
      type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
    }
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
   //定义保存的图片名称
    var filename = new Date().toLocaleDateString() + '.' + type;
    _this.saveFile(imgdata, filename);
},
//将图片保存到本地
saveFile:function (data, filename) {
  var link = document.createElement('a');
  link.href = data;
  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);
  link.dispatchEvent(event);
}