如果想把多张图拼成一张图,比如把用户二维码和宣传图片拼成一张图,因为二维码是不固定的,而宣传图片一般是固定的,所以需要动态的拼图,之前说过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://ddceo.com/google.png"/> <img id="sss" src="http://cdn.ddceo.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的图片合成成为一张图片
但是这个函数得到的这个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://ddceo.com/google.png" /> <img id="sss" src="http://cdn.ddceo.com/content/uploadfile/201610/c6f91476590939.jpeg" /> <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"> </canvas> </div> </body> </html>
四、参考文章
版权属于:东哥笔记 - DongGe.me
本文链接:https://dongge.org/blog/378.html
自2017年12月26日起,『转载以及大段采集进行后续编辑』须注明本文标题和链接!否则禁止所有转载和采集行为!