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

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

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

点击分享按钮时，将图片转换为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,
		// icon: 'none'
		// })
		bitmap.save(url, {
			overwrite: true,  // 是否覆盖
			// quality: 'quality' // 图片清晰度
		}, (i) => {
			// uni.showToast({
			// title: '成功回调函数:' + JSON.stringify(i),
			// icon: 'none'
			// })
			plus.gallery.save(i.target, function() {
					uni.showToast({
						title: '图片保存至相册成功',
						icon: 'none'
					})
					bitmap.clear()
				},
				function(e) {
					uni.showToast({
						title: '图片保存至相册失败:' + JSON.stringify(e),
						icon: 'none'
					})
					bitmap.clear()
				},
			);
		}, (e) => {
			uni.showToast({
				title: '图片保存失败1:' + JSON.stringify(e),
				icon: 'none'
			})
			bitmap.clear()
		});


### 结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/06c644297ab502222bca9ce49e34e544.webp?x-oss-process=image/format,png)

有看到更好的书欢迎推荐呀。

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

[外链图片转存中...(img-6gC39i5t-1715276558744)]