h5页面转png图片_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写的

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

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