如果想把多张图拼成一张图,比如把用户二维码和宣传图片拼成一张图,因为二维码是不固定的,而宣传图片一般是固定的,所以需要动态的拼图,之前说过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(&quot;mmm&quot;);
//两张图
var&nbsp;img&nbsp;=&nbsp;document.getElementById(&quot;sss&quot;);

  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&nbsp;=&nbsp;canvas.toDataURL(&quot;image/jpeg&quot;,0.8);

        console.log(srccc);
}

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

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

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

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>

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

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

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

        function&nbsp;savePic()&nbsp;{
            //只能保存本地路径

// var img_path = srccc;
// plus.gallery.save(img_path, function() {
// mui.alert("保存成功");
// });

        //base64编码可以传到oc端使用保存
        }
    &lt;/script&gt;

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

</html>

四、参考文章

Last modification:January 1st, 1970 at 08:00 am
如果觉得我的文章对你有用,请随意打赏: ☞已打赏列表