在使用uniapp开发支付宝小程序时,碰到了需要将html转化为图片并下载的需求,发现在支付宝小程序中无法使用html2canvas进行处理,所以使用canvas自己绘制的方式,主要代码如下所示:
html
<view id="container">
<!-- 需要转换的html代码 -->
</view>
<canvas id="myCanvas"></canvas>
javascript
my.createSelectorQuery().select('#container').boundingClientRect().exec((ret) => {
const rect = ret[0];
//rect为container实例对象,可以获取到宽高等参数
const context = my.createCanvasContext('myCanvas');
//手写需要绘制的内容
context.fillText('申请人姓名:小如', 10, 10)
context.draw(true, () => {
my.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
console.log('图片路径:' + res.tempFilePath);
my.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
});
},
fail: (err) => {
console.error('生成图片失败:', err);
}
});
});
})
在h5页面中,可以使用html2canvas进行处理
javascript
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
//调用save方法进行转换
save() {
const container = document.querySelector('#container'); // 获取包含需要保存为图片的元素的容器
// 使用html2canvas将元素转换为canvas
html2canvas(container).then((canvas) => {
let url = canvas.toDataURL('image/png');
this.src = url; //获取到了url可以直接在界面中展示
// 将canvas转换为Blob对象
// canvas.toBlob((blob) => {
// saveAs(blob, '考试安排.png');
// uni.saveImageToPhotosAlbum({
// filePath: blob,
// success() {
// uni.showToast({
// title: '保存成功',
// icon: 'success'
// });
// },
// fail() {
// uni.showToast({
// title: '保存失败',
// icon: 'none'
// });
// }
// });
// }, 'image/png');
});
}