uniapp实现截长图并保存图片至本地
1、转化为图片,最直接的方法就是截长图,就可以使用html2canvas方法。首先，需要使用npm install html2canvas方法，将html2canvas引入到自己的代码中。
2、使用html2canvas的时候，需要操作dom元素。那么就需要引入lang="renderjs"，将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 位url
turnBase64Image(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 = true
console.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 = this
console.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设置为0
scrollX: 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>