用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
    评论
Cropper.js 是一个用于图片裁剪的 JavaScript 库。它可以用于在前端实现用户自定义的图片裁剪功能。以下是使用 Cropper.js 的基本步骤: 1. 引入 Cropper.js 相关文件。在 HTML 页面中,通过 `<script>` 标签引入 Cropper.js 库文件和样式文件: ```html <link rel="stylesheet" href="path/to/cropper.css"> <script src="path/to/cropper.js"></script> ``` 2. 创建一个 `<img>` 元素,用于显示待裁剪的图片: ```html <img id="image" src="path/to/image.jpg"> ``` 3. 初始化 Cropper.js。在 JavaScript 中,找到该 `<img>` 元素,并使用 `new Cropper(element, options)` 初始化 Cropper.js 的实例。`element` 参数是需要进行裁剪的 `<img>` 元素,`options` 参数是一个对象,用于配置裁剪的各种行为和样式: ```javascript var image = document.getElementById('image'); var cropper = new Cropper(image, { // 配置参数 }); ``` 4. 可选:配置 Cropper.js 的参数。可以根据需要配置 Cropper.js 的各种参数,例如裁剪框的大小、裁剪比例、裁剪结果的输出等。具体的参数配置可以参考 Cropper.js 的官方文档。 5. 获取裁剪结果。使用 `cropper.getCroppedCanvas()` 方法获取裁剪后的图像内容,并进行进一步的处理,比如上传到服务器或显示在页面上: ```javascript var croppedCanvas = cropper.getCroppedCanvas(); // 对裁剪结果进行处理 ``` 6. 销毁 Cropper.js 实例。在不需要使用 Cropper.js 时,可以使用 `cropper.destroy()` 方法销毁实例,释放资源。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值