h5页面生成图片

H5页面生成图片

这个是生成代码

   shareimg() {

      let self = this;

      var shareContent = document.getElementById("report-box");

      var width = shareContent.offsetWidth; //获取dom 宽度

      var height = shareContent.offsetHeight; //获取dom 高度

      var canvas = document.createElement("canvas"); //创建一个canvas节点

      var scale = 2; //定义任意放大倍数 支持小数

      canvas.width = width * scale; //定义canvas 宽度 * 缩放

      canvas.height = height * scale; //定义canvas高度 *缩放

      // canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

      var opts = {

        scale: scale, // 添加的scale 参数

        canvas: canvas, //自定义 canvas

        // logging: true, //日志开关，便于查看html2canvas的内部执行流程

        width: width, //dom 原始宽度

        height: height,

        useCORS: true, // 【重要】开启跨域配置

      };

      html2canvas(shareContent, opts).then(function (canvas) {

        var context = canvas.getContext("2d");

        // 【重要】关闭抗锯齿

        context.mozImageSmoothingEnabled = false;

        context.webkitImageSmoothingEnabled = false;

        context.msImageSmoothingEnabled = false;

        context.imageSmoothingEnabled = false;

        // 【重要】默认转化的格式为png,也可设置为其他格式

        let canvasdata = canvas.toDataURL("image/png");

        // canvasdata = canvasdata.replace("image/png","image/octet-stream");

        uni.showToast({

          title: "图片获取成功,请长按图片保存！",

        });

        self.imageurl = canvasdata;

        self.imageheight = canvas.height * (1 / scale) * 0.8 + "px";

        self.imageflag = true;

        setTimeout(function () {

          var selectquery = uni.createSelectorQuery();

          console.log(selectquery.select(".imagebox"));

          selectquery

            .select(".imagebox")

            .boundingClientRect((data) => {

              self.blockboxheight = data.height;

            })

            .exec();

        }, 0);

}

并且需要配置一个idv

这个是用uni-app写的

写的比较简陋，这个可以把你当前页面所有的内容都生成一张长图。

欢迎留言讨论哈，比较也是小白一枚！