Html5多图拼成一张图

如果想把多张图拼成一张图,比如把用户二维码和宣传图片拼成一张图,因为二维码是不固定的,而宣传图片一般是固定的,所以需要动态的拼图,之前说过IOS原生的截图拼图方法:《IOS截图和拼图》,因为最近是用MUI框架做,所以除了使用IOS原生的OC方案之后,又找了下使用JS把多张图拼成一张图的方法。

一、界面布局创建一个canvas

先随便布局下,更加清晰展现效果

<div class="mui-content">
	<button onclick="mmm()" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
	<img id="google" src="http://hudongdong.com/google.png"/>
	<img id="sss" src="http://cdn.hudongdong.com/content/uploadfile/201610/c6f91476590939.jpeg"/>
	<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
	</canvas>
</div>

这里就是通过网站链接获得两个图片,创建img,点击按钮,把这两个图片合成一张图片

二、使用canvas合成图片

使用canvas先画出第一张图片,然后在第一张图片中的相应位置画出第二张图片,drawImage里面的参数就是对应的裁剪的起始位置,大小,位置等,具体可以看后面的参考链接的说明

function mmm () {
	console.log("mmm");
	//两张图
	var img = document.getElementById("sss");
 	var canvas = document.getElementById("myCanvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        		
        var img2 = document.getElementById("google");
        ctx.drawImage(img2, 0, 0, img2.width, img2.height,40,50,img2.width,img2.height);
	srccc = canvas.toDataURL("image/jpeg",0.8);
        console.log(srccc);
}

做出来的效果就是下面这个合成的图片,已经把谷歌的图片和ipv6的图片合成成为一张图片

Simulator Screen Shot 2016年10月24日 下午5.58.46.png

但是这个函数得到的这个srccc就是得到的base64的编码,就像昨天说的那种格式

data:image/png;base64,iVBORw0KGgo....

这个格式是直接可以显示为图片的,是一张完整的图片

下载 (2).png

但是如果想保存到本地,就需要转码才可以,因为下面这个保存图片的方式,图片路径需要是本地路径,不能是base64编码。

plus.gallery.save(img_path, function() {

});

百度下用js把这个base64编码的图片转换成本地图片再写入相册还是挺麻烦的,所以简单的思路就是把生成的srccc这个base64编码的数值传到oc端,在oc端解码之后,使用UIImageWriteToSavedPhotosAlbum这个函数写入到相册,注意也是需要把这个base64编码只截取"base64,"后面的的那串编码,截取的方法可以参考《MUI上传图片备忘》中split(",")的方法,下面这个函数就是将base64编码在oc端创建成图片并保存到相册

NSData *data =[[NSData alloc] initWithBase64EncodedString:@"base64的编码" options:NSDataBase64DecodingIgnoreUnknownCharacters];
UIImage *image = [UIImage imageWithData:data];
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);

传值很简单,现在就是做一个demo给别人看,如果有需要后面再补上一个完整运行的demo

三、html文件思路

这个是html这个文件,保存图片传到oc的没有写,主要展示合成的方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<script type="text/javascript">
			var srccc;
			function mmm() {
				console.log("mmm");
				//两张图
				var img = document.getElementById("sss");
				var canvas = document.getElementById("myCanvas");
				canvas.width = img.width;
				canvas.height = img.height;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, img.width, img.height);

				var img2 = document.getElementById("google");
				ctx.drawImage(img2, 0, 0, img2.width, img2.height, 40, 50, img2.width, img2.height);
				srccc = canvas.toDataURL("image/jpeg", 0.8);
				console.log(srccc);
				savePic();
			}

			function savePic() {
				//只能保存本地路径
//				var img_path = srccc;
//				plus.gallery.save(img_path, function() {
//					mui.alert("保存成功");
//				});
			//base64编码可以传到oc端使用保存
			}
		</script>

	        //按钮的布局
		<div class="mui-content">
			<button onclick="mmm()" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
			<img id="google" src="http://hudongdong.com/google.png" />
			<img id="sss" src="http://cdn.hudongdong.com/content/uploadfile/201610/c6f91476590939.jpeg" />
			<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
		        </canvas>
		</div>
	</body>
</html>

四、参考文章

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment