页面转换为图片保存到手机html2canvas、base64ToPath
本人只解决了 html2canvas、base64ToPath的引入问题,本文章解决方案并不完整
完整示例请参考uni-app 中使用 html2canvas 生成图片(支持多端)_不想搬砖。的博客-CSDN博客
使用html2canvas将页面标签转换为图片。
1、引入html2canvas
因为uniapp中不好使用npm安装,我们到html2canvas官网下载他的集成js文件引入使用。
html2canvas地址:html2canvas - Screenshots with JavaScript *可能打不开需要用vpn
GitHub地址:https://github.com/niklasvh/html2canvas *没找到html2canvas.min.js文件
import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片
生成图片代码
<script lang="renderjs" module="canvasImage">
// 因为用使用dome操作,uniapp只能使用renderjs的方法操作dome
// 这里另外简历一个script 使用renderjs渲染图片避免与其他代码冲突
// canvasImage.generateImage标签中根据id来执行相应模块的事件
import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片
export default {
methods: {
imgsave(e,ownerFun) {
ownerFun.callMethod('_showLoading','正在生成图片') // 生成图片的 loading 提示
setTimeout(() => {
const dom = document.getElementById('backBox') // 需要生成图片内容的 dom 节点
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0, // html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0
scrollX: 0,
useCORS: true, //支持跨域
// scale: 2, // 设置生成图片的像素比例,默认是1,如果生成的图片模糊的话可以开启该配置项
}).then((canvas) => {
// 生成成功
// html2canvas 生成成功的图片链接需要转成 base64位的url
ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
}).catch(err=>{
// 生成失败 弹出提示弹窗
ownerFun.callMethod('_errAlert',`【生成图片失败,请重试】${err}`)
})
}, 300)
},
},
}
</script>
base64转path的方法在uni的插件市场搜索base64ToPath安装即可
i
mport { base64ToPath } from "../../../../../js_sdk/mmmm-image-tools/index"; // 图片地址转base64url
最近根据业务需求需要适配h5端,因为uni.saveImageToPhotosAlbum这个api无法在h5中使用,只能调用预览api uni.previewImage 将生成的图片预览出来,让用户自行保存图片
if (navigator) { // 判断是浏览器还是手机 true为手机false为app
uni.showToast({
title: "长按保存到手机",
duration: 2000,
icon: "none",
});
setTimeout(() => {
uni.previewImage({ // 预览api
urls: [filePath],// 需要数组的方式
current: 0,
indicator: "default",
});
}, 1000);
} else {
uni.saveImageToPhotosAlbum({
filePath, // 需要临时文件路径,base64无法保存
success: () => {
this._showToast("保存图片成功");
},
fail: () => {
this._showToast("保存图片失败,请重试");
},
});
}