1、转化为图片,最直接的方法就是截长图,就可以使用html2canvas方法。首先，需要使用npm install html2canvas方法，将html2canvas引入到自己的代码中。
2、使用html2canvas的时候，需要操作dom元素。那么就需要引入lang="ren蟠校盯昂derjs媪青怍牙"，将script由逻辑层转化为视图层，在视图层就可以操作dom元素了，如图所示。需要进入页面就执行截图方法的话，就在mounted中调用截图函数。
3、但是，如果截图的区域有本地图片的话，就需要先把本地图片转化为base64位的图片，否则会截出空白的页面。在插件市场中，引入image-tools插件，转化本地图片。
4、最后，再将截图之后的base64位图片转化为bath路径，就可以成功保存到本地或者实现分享操作了。
5、最后，是一些可能用到的loading提示方法。
6、全部代码如下：<script>// 本地图片转base64位import {pathToBase64,base64ToPath魈胺闹臣} from '../../../js_sdk/mmmm-image-tools/index.js'export default {data() {return {image1: '', // 本地的图片image2: '',emptyImg: '',// 空值时的图片backgroundImg: '',// 背景图片nextImg: '',posterUrl: '', // 生成画布的图片shareImg: '',}},onLoad() {this.turnBase64Image('../../../static/images/currency/defaultHead.png', 'image1');this.turnBase64Image('../../../static/images/currency/hat.png', 'image2');this.turnBase64Image('../../../static/images/currency/lackPage6.png', 'emptyImg');this.turnBase64Image('../../../static/images/analysis/nav-manage.png', 'backgroundImg');this.turnBase64Image('../../../static/images/analysis/button_next.png', 'nextImg');},methods: {// 将图片转为base 64 位urlturnBase64Image(img, key) {uni.getImageInfo({src: img,success: image => {pathToBase64(image.path).then(base64 => {this[key] = base64;}).catch(error => {console.log('转换失败：', error);});},fail: err => {console.log('将本地图片转为base 64报错:', err);}});},// 保存图片到手机相册saveImage() {console.log("点击了下载图片按钮",this.shareImg)uni.saveImageToPhotosAlbum({filePath: this.shareImg, // 需要临时文件路径，base64无法保存success: () => {this._showToast('保存图片成功');},fail: () => {this._showToast('保存失败，请重试');}});},// 获取生成的base64 图片路径receiveRenderData(val) {// this.shareBoxShow = trueconsole.log("生成图片结束 ",val)this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格const imageStr = this.posterUrl;// 将base64转化为临时地址base64ToPath(imageStr).then(path => {console.log("开始保存图片 ",path)this.shareImg = path}).catch(error => {console.error('临时路径转换出错了：', error);});},// 显示loading_showLoading(str) {this.posterUrl = '';uni.showLoading({title: str});},// 隐藏loading_hideLoading() {uni.hideLoading();},// 报错alert_errAlert(content) {uni.showModal({title: '提示',content: content});},// 提示弹窗_showToast(msg) {uni.showToast({title: msg,icon: 'none'});},//分享至微信、朋友圈、QQ、QQ空间handleShare(type) { let that = thisconsole.log("点击了分享图片按钮",that.shareImg) uni.share({ provider: "weixin" , scene: type === 'weixin' ? 'WXSceneSession' : 'WXSceneTimeline', type: 2, title: "AA", imageUrl: that.shareImg, success(res) { that.$u.toast('分享成功') }, fail(err) { that.$u.toast('分享失败') console.log("fail:" + JSON.stringify(err)); }, complete(res) { that.disShow = false } })},}}</script><!-- 引入另一个script --><script module="canvasImage">import { base64ToPath } from '../../../js_sdk/mmmm-image-tools/index.js'import html2canvas from 'html2canvas'export default {mounted() {setTimeout(() => {this.canvasImage.generateImage()}, 1000);},methods: {// 生成图片需要调用的方法generateImage(e, ownerFun) {// ownerFun.callMethod('_showLoading', '正在生成图片') // 生成图片的 loading 提示setTimeout(() => {const dom = document.getElementById('pagePoster') // 需要生成图片内容的 dom 节点html2canvas(dom, {width: dom.clientWidth, //dom 原始宽度height: dom.clientHeight,scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0scrollX: 0,useCORS: true, //支持跨域// allowTaint: false,scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项}).then((canvas) => {// 生成成功// ownerFun.callMethod('_hideLoading') // 生成结束,关闭loading 提示this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))}).catch(err => {// 生成失败 弹出提示弹窗this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)})}, 300)}}}</script>