跨平台应用开发进阶(五十三)：uni-app 通过webview方式嵌套H5实现图片点击下载_h5嵌入app中怎么实现下载功能(2)

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

文章目录

• • 一、前言
    • 二、实现方案
    • 三、拓展阅读

一、前言

在项目开发过程中，遇到uni-app通过webview嵌套H5项目，实现H5中图片点击下载的需求。

二、实现方案

实现思路：需要用到Bitmap，把base64转成bitmap文件对象，保存到系统相册（但是此时某些手机上无法显示出来，其实是保存成功的），然后使用plus.gallery.save方法将图片保存到系统相册中。

1. Bitmap是原生图片对象，其有个方法是loadBase64Data；于是首先创建一个bitmap对象;
2. 然后使用loadBase64Data将base64字符串转换为bitmap文件对象;
3. 调用bimap.save方法，将图片文件存入手机存储（记得bitmap.clear()，比较占内存）;
4. 应用plus.gallery.save方法将图片成功保存并显示；

点击分享按钮时，将图片转换为base64格式。

signShare() {
    this.toImage();
},
toImage() {
   Toast.loading();
   const node = this.$refs.luckyInfo;
   htmlToImage(node, 2).then(img => {
       this.shareObject.image = img;
       // launchSharePanelPic(this.shareObject);
// 展示海报
this.showPicNewyear(this.shareObject.image, this.shareObject.title);
       // this.goPage();
       Toast.hide();
   }).catch(err => {
       console.log(err);
       Toast.hide();
   })
},

其中，htmlToImage为利用html2canvas方法将页面html转换为base64。

// 利用html2canvas将页面html转换为base64
export function htmlToImage(node, ratio = 16/9) {
    // 获取像素比
    const scale = getDPR();
    let  canvasOptions = document.createElement("canvas"); 
    canvasOptions.width = window.innerWidth \* scale;
    canvasOptions.height = window.innerWidth \* ratio \* scale;

    return new Promise((resolve, reject) => {
        html2canvas(node, {
            canvas: canvasOptions
        }).then(canvas => {
            let dataUrl = canvas.toDataURL("image/png");
            const image = dataUrl.replace(/^.+?base64,/, "");
            resolve(image);
        }).catch(err => {
            reject(err);
        });
    })
}

其中，luckyInfo为待保存图片区域。

<div class="pic-bg"
 :style="`background-image: url(${bgUrlBase64})`"
 ref="luckyInfo">
            <slot name="bg"></slot>
        	<slot name="userInfo"></slot>
			<slot name="barcode"></slot>
</div>

点击预览图片后，触发保存事件：

saveImgFile() {
	const bitmap = new plus.nativeObj.Bitmap("test");
	bitmap.loadBase64Data(this.footerUrlBase64, function() {
		const url = "\_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
		// uni.showToast({
		// title: 'saveHeadImgFile:' + url,


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/b02233e89c964f3e8fb058a48565cce4.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/e56bff6c9df15bf7ee3e1d35a0944aec.webp?x-oss-process=image/format,png)


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

715276522160)]

[外链图片转存中...(img-lFdbxPRQ-1715276522160)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**