资讯新闻 以有涯随无涯，殆已！已而为知者，殆而已矣！ ---庄周-
序
例如你玩星座付费解析后，需要把所有的分析结果变成图片保存到手机相册中，涉及到2个内容
1.如果把整个页面变成图片
2.公众号H5情况下如何保存图片到相册
技术来源
先说如何把整个页面变成图片，因为重新去做一个canvas去塞入众多内容不如直接把将整个页面保存为图片
用到技术来自文章：《uniapp如何实现将整个页面保存为图片功能》
https://bbs.itying.com/topic/690343544a7a41007019982a
原理基本也就是把整个图片放入画布转成图片
H5平台
// 安装 html2canvas：npm install html2canvas
import html2canvas from 'html2canvas';
// 方法示例
async function capturePage() {
const element = document.getElementById('capture-area'); // 指定要截图的区域
const canvas = await html2canvas(element, {
useCORS: true, // 允许跨域图片
scale: 2 // 提高清晰度
});
// 转换为图片并下载
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imgData;
link.download = 'page-screenshot.png';
link.click();
}微信小程序平台
<!-- 在模板中添加 canvas -->
<canvas id="myCanvas" canvas-id="myCanvas" style="width:100%;height:100vh;"></canvas>// 在 methods 中定义方法
methods: {
savePageAsImage() {
const query = uni.createSelectorQuery().in(this);
query.select('#capture-area').fields({ node: true, size: true }).exec(res => {
const node = res[0].node;
// 创建 canvas 上下文
const ctx = uni.createCanvasContext('myCanvas', this);
ctx.drawImage(node, 0, 0, 300, 200); // 调整尺寸
ctx.draw(false, () => {
// 保存到相册
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => uni.showToast({ title: '保存成功' })
});
}
});
});
});
}
}如何保存图片
在uni-app开发H5的环境下是无法使用uni.saveImageToPhotosAlbum；在浏览器中可以直接a标签打开图片进行下载。但是在微信开发工具和公众号H5真机测试是没办法实现的
而canvas转成的画布是Base64，也无法使用uni.previewImage预览；只能通过image标签直接显示 提示用户长按保存
<!-- 保存页面按钮 -->
<view class="save-page-section">
<view class="save-btn" @click="savePage">
<text class="save-icon">📷</text>
<text class="save-text">保存页面</text>
</view>
</view>
<!-- 弹窗 -->
<view class="preview-modal" v-if="showPreviewModal" @click="closePreviewModal">
<view class="modal-content" @click.stop>
<view class="modal-header">
<text class="modal-title">页面预览</text>
<text class="modal-close" @click="closePreviewModal">×</text>
</view>
<view class="modal-body">
<image v-if="previewImage" :src="previewImage" mode="aspectFit" class="preview-image"
show-menu-by-longpress />
<view class="preview-tip">
<text class="tip-icon">👆</text>
<text class="tip-text">长按图片保存到手机相册</text>
</view>
</view>
</view>
</view>源码下载
由于代码很长，打包下载本地运行看看效果（注意需要真机才能长按保存）