用cropper.js实现图片合成
1.html的头部和尾部分别引入cropper的css和js文件;
<head>
<link rel="stylesheet" href="路径/cropper.min.css">
</head>
<body>
<!-- 背景图片 -->
<div id="page-one">
<img id="page-one-img01" src="路径/bg01.png" alt="" >
</div>
<!-- 导入图片 -->
<div class="page-one-btn-box">
<a href="javascript:void(0);" id="aFile" class="page-one-btn">
<input type="file" name="pic[]" style="width:100%;height:100%;" id="upload-pic" accept="image/*" >
</a>
</div>
<!-- 图片合成界面 -->
<!-- 1.预览区域 -->
<div id="page-two" style="display:none">
<!-- 相对定位 -->
<div class="preview-box">
<!-- 绝对定位 -->
<div class="previw-image-box" >
</div>
<!-- 绝对定位 -->
<div id="clip-image-box">
</div>
</div>
<!-- 2.操作按钮 -->
<div class="btn-wrapper">
<!-- 取消合成 -->
<span id="cancel-upload" class="common-btn"></span>
<!-- 确定合成 -->
<span class="btn-two common-btn" id="merge-image"></span>
</div>
<!--3. cropper.js的固定写法-->
<div class="tailoring-wrapper">
<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box">
<img id="image" src="" style="max-width:100%;">
</div>
<div class="small"></div>
</div>
<!--4.合成图片容器-->
<div>
<div id="merge-image-box">
<img src="" alt="" id="final-merge-image" style="width:100%;height:auto;">
</div>
<div style="text-align:center;display:none;" class="share-introduct-box">
<button id="share-introduct" class="btn btn-default">长按图片保存并分享至朋友圈</button>
</div>
</div&