代码片段: html2canvas 清晰度

463 阅读1分钟
import html2canvas from "html2canvas";
 htmlToImg(str) {
    if (this.isSavingImg) {
      return false;
    }
    let zoom = 2.5;//调清晰度,越大越清晰, 2.5是个合适值
    let elem = document.querySelector(str);
    var scale = zoom; //this.scale;
    var width = $(elem).width();
    var height = $(elem).height();
    var canvas = document.createElement("canvas");
    canvas.width = width * scale;
    canvas.height = height * scale;

    var context = canvas.getContext("2d");
    // 【重要】关闭抗锯齿
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;

    // context.scale(0.5, 0.5);
    context.scale(zoom, zoom);
    // var context = canvas.getContext("2d");

    var opts = {
      // dpi: window.devicePixelRatio * scale,
      scale: 1, //window.devicePixelRatio,
      canvas: canvas, //自定义 canvas
      logging: false, //日志开关,便于查看html2canvas的内部执行流程
      // width:s: this.sh, //window.screen.availHeight, //dom 原始宽度
      width: width,
      height: height,
      // x: 0,
      // y: window.pageYOffset,
      useCORS: true // 【重要】开启跨域配置
    };
    // $(".item-char").addClass("mt20");

    try {
      this.isSavingImg = true;
      $.toast("图片保存中,请稍后...");
      html2canvas(elem, opts).then(canvas => {
        $(".item-char").removeClass("mt20");
        var imgUri = canvas.toDataURL("image/jpeg");

        // this.uploadImage(this.dataURLtoBlob(imgUri));
        this.uploadToSth(this.dataURLtoBlob(imgUri));
        /*
          var fd = new FormData();
    var file = new File([blob], "year2020.png");
    fd.append("file", file);
    */
      });
    } catch (e) {
      this.isSavingImg = false;
    }
  }
  dataURLtoBlob(dataurl) {
    var arr = dataurl.split(","),
      // mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: "image/png" });
  }