webapp保存图片到手机相册

环境介绍

手机：小米6x
系统：安卓

需要实现的功能

如上图，点击保存海报按钮，将图片保存到手机相册中。

如何实现

实现逻辑：
(1)需要使用canvas将背景图片与用户头像，昵称，二维码绘制成一张图片;
(2)根据html5+的功能模块进行实现

代码部分

<script type="text/javascript">
	// 等页面加载完毕之后，才开始执行函数
	$(function(){
		// 扩展API加载完毕后调用onPlusReady回调函数
		document.addEventListener( "plusready", onPlusReady, false );
		// 扩展API加载完毕，现在可以正常调用扩展API
		function onPlusReady() {
			// 执行函数
			// 出发点击事件
			$(".saveBannerBtn").on("click",function(){
				// 第一：canvas绘制图片部分逻辑代码
				canvasImage(function(base64){
					var time   = (new Date()).getTime();
					// 第二：获取原生图片对象
					var bitmap = new plus.nativeObj.Bitmap();
					// 第三：加载原生图片的base64信息
					bitmap.loadBase64Data(base64, function() {
						bitmap.save("_doc/"+time+".png", {
							overwrite: true,
							quality: 100
						}, function(success) {
							//保存到相册
							plus.gallery.save(success.target, function() {
								plus.io.resolveLocalFileSystemURL(success.target, function() {
									mui.toast('保存成功');
								});
							},function(error){
								console.log(JSON.stringify(error));
							});
						}, function(error) {
							console.log(JSON.stringify(error));
						});
					}, function(error) {
						console.log(JSON.stringify(error));
					});
				});
			});
		}

		// 绘制canvas
		function canvasImage(callback){
			var canvasEle = document.createElement('canvas');
			var image     = new Image();
			// 背景图片的地址
			image.src = bg_image;
			image.onload = function() {
				// 使用 naturalWidth 为了保证图片的清晰度
				canvasEle.width  = image.naturalWidth;
				canvasEle.height = image.naturalHeight;
				canvasEle.style.width  = `${canvas.width / window.devicePixelRatio}px`;
				canvasEle.style.height = `${canvas.height / window.devicePixelRatio}px`;

				var canvas = canvasEle.getContext('2d');
				// 中间省略绘制逻辑
				var base64 = canvasEle.toDataURL('image/png');
				// 回调函数
				callback(base64);
			}
		}
	});
</script>