如果想把多张图拼成一张图，比如把用户二维码和宣传图片拼成一张图，因为二维码是不固定的，而宣传图片一般是固定的，所以需要动态的拼图，之前说过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://dongge.org/google.png"/> <img id="sss" src="http://blog.cdn.yechan.net/blog/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的图片合成成为一张图片
但是这个函数得到的这个srccc就是得到的base64的编码，就像昨天说的那种格式
data:image/png;base64,iVBORw0KGgo....
这个格式是直接可以显示为图片的，是一张完整的图片
但是如果想保存到本地，就需要转码才可以，因为下面这个保存图片的方式，图片路径需要是本地路径，不能是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://dongge.org/google.png" />
<img id="sss" src="http://blog.cdn.yechan.net/blog/content/uploadfile/201610/c6f91476590939.jpeg" />
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
</canvas>
</div>
</body>
</html>四、参考文章
版权属于：东哥笔记 - DongGe.org
本文链接：https://dongge.org/blog/378.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！
