用cropper.js实现图片合成

用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&
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值