0%

将canvas保存成图片工具类

发表于 分类于

文章字数：122,阅读全文大约需要1分钟

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

/**
 * 将canvas的内容保存成图片
 */
function saveAsPng(canvasOb, name) {
    if(name == null || name == "") {
        name = "img";
    }
    var type = "image/png";
    var imgData = canvasOb.toDataURL({format: type});
    var base64Str = imgData.substr(22, imgData.length);
    var blob = base64ToBlob(base64Str, type);
    downloadByBlob(blob, name + "png");
}

/**
 * 将base64数据转换成blob文件对象
 */
function base64ToBlob(b64data, type) {
    var byteCharacters = atob(b64data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += 512) {
      var slice = byteCharacters.slice(offset, offset + 512);
      var byteNumbers = [];
      for (var i = 0; i < slice.length; i++) {
          byteNumbers.push(slice.charCodeAt(i));
      }
      byteArrays.push(new Uint8Array(byteNumbers));
    }
    var result = new Blob(byteArrays, {type: type})
    result = Object.assign(result,{preview: URL.createObjectURL(result)});
    return result;
}

/**
 * 根据指定的blob对象和文件名调用浏览器下载文件
 */
function downloadByBlob(blob, fileName) {
    var link = document.createElement("a");
    link.download = fileName + ".png";
    link.href = URL.createObjectURL(blob);
    link.click();
}