vue 微信公众号H5页面截取长图并分享给朋友

截图：使用dom-to-image 或者 html2canvas
分享：可以使用右上角分享或者自定义分享wx.updateAppMessageShareData

截图dom-to-image 并分享

请注意，dom-to-image库在将DOM元素转换为图片时可能不会包括所有的CSS样式，因为它是基于SVG来生成的，而SVG可能无法完全匹配原始DOM元素的样式。此外，如果页面中包含大量的动态内容或者是iframe，转换过程可能也会比较复杂。

npm install dom-to-image

<template><div><div class="page" id="my-node"><div class="title">日报</div></div><button class="btn-box" @click="onShare">一键分享长图至微信群</button><!-- <img :src="img" v-if="img" /> --></div>
</template><script>
import domToImage from 'dom-to-image'
export default {name: "daily",data () {return {img: ""}},mounted () {this.query()},methods: {onShare () {let node = document.getElementById('my-node');// 生成png图片// domtoimage.toPng(node)//   .then((dataUrl) => {//     this.img = dataUrl;//     console.log(dataUrl, 'dddd')//   })//   .catch(function (error) {//     console.error('oops, something went wrong!', error);//   });// 生成文件，手机上操作下载后 会打开图片，点击右上角三个点就可以分享给朋友domToImage.toBlob(node).then(function (blob) {// 这里你可以处理blob对象，例如使用URL.createObjectURL来生成一个可以在下载中使用的URLconst url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'page-image.png'; // 设置下载的文件名document.body.appendChild(a);a.click(); // 模拟点击下载链接document.body.removeChild(a);// 释放URL对象URL.revokeObjectURL(url);});},query () {// 请求数据}}
};
</script>
<style>
.page {padding: 10px 10px 60px 10px;background: #f3f3f3;
}
.title {text-align: center;margin: 20px 0 10px 0;font-size: 13px;
}
.des {background-color: #3f61c94f;padding: 6px 0px;margin: 10px 0;
}
.btn-box {width: 100%;height: 40px;line-height: 40px;color: #fff;background-color: #224799;border: none;margin-top: 40px;position: fixed;bottom: 0;left: 0;right: 0;
}
</style>

html2canvas截图并分享

如果你想要将整个页面转换为图片，通常需要使用到 html2canvas库，它可以将整个页面渲染为canvas元素，然后转换为图片。但是这通常会导致图片文件大小较大，并且可能不会包括页面中的某些内容，因为html2canvas渲染的是页面的布局，而不是内容。

npm install html2canvas


<template><div><div class="page" id="my-node" ref="imageToFile"><div class="title">日报</div></div><button class="btn-box" @click="onShare">一键分享长图至微信群</button><!-- <img :src="img" v-if="img" /> --></div>
</template><script>import html2canvas from 'html2canvas'export default {data() {return {img: ""}},mounted() {},methods: {onShare() {// html2canvas(this.$refs.imageToFile, {//   width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,//   height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,// }).then((canvas) => {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等//   this.img = canvas.toDataURL('image/png');// })let element = document.getElementById('my-node');html2canvas(element).then(function(canvas) {// 将canvas转换为blob对象canvas.toBlob(function(blob) {// 创建一个下载链接const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'page-image.png'; // 设置下载的文件名document.body.appendChild(a);a.click(); // 模拟点击下载链接document.body.removeChild(a);// 释放URL对象URL.revokeObjectURL(url);}, 'image/png'); // 设置图片格式为png});},},}
</script>
<style>
.page {padding: 10px 10px 60px 10px;background: #f3f3f3;
}
.title {text-align: center;margin: 20px 0 10px 0;font-size: 13px;
}
.des {background-color: #3f61c94f;padding: 6px 0px;margin: 10px 0;
}
.btn-box {width: 100%;height: 40px;line-height: 40px;color: #fff;background-color: #224799;border: none;margin-top: 40px;position: fixed;bottom: 0;left: 0;right: 0;
}
</style>

自定义分享

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});