用cropper.js实现图片合成

最新推荐文章于 2023-10-22 08:00:00 发布

弦月-hill

最新推荐文章于 2023-10-22 08:00:00 发布

阅读量744

点赞数 2

本文链接：https://blog.csdn.net/gongxuanyue/article/details/103457632

版权

用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&

最低0.47元/天解锁文章

弦月-hill

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用cropper.js实现图片合成

用cropper.js实现图片合成1.html的头部和尾部分别引入cropper的css和js文件; <head> <link rel="stylesheet" href="路径/cropper.min.css"> </head> <body>  <div...
复制链接

扫一扫