uniapp实现html转换为图片并下载

在使用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');
  });
}
相关推荐
Mr_Xuhhh21 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index6 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos