jQuery实现多张图片上传并合成一张图特效代码免费下载
【资源属性】:资源名称:jQuery实现多张图片上传并合成一张图特效代码
资源大小:50KB
资源类别: js框架 》 jQuery
更新时间:2023-01-23
资源语言:简体中文
授权方式:免费下载
使用平台:Windows/Linux/Mac
下载地址:下载地址
jQuery实现多张图片上传并合成一张图特效代码即多张图片 上传合成。jQuery上传图片合成预览。通过上传主图1,主图2,主图3,合成一张图片效果代码。支持拖动排序合成图片效果。
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/jquery.Jcrop.min.css"> <link rel="stylesheet" href="css/extend.css">
2. 引入JS
<script src="js/jquery.js"></script> <script src="js/jquery.Jcrop.min.js"></script> <script src="js/index.js"></script>
3. HTML代码
<div class="addImgModel">
<!--<button type="button" class="btn btn-primary selImgBtn">选择图片</button>-->
<!--<button type="button" class="btn btn-success sureImgBtn">确定</button>-->
<!--<button type="button" class="btn btn-warning closeImgBtn">取消</button>-->
<div class="head">
<span class="upImg">上传背景图</span>
<input type="file" id="pieceFileImg" style="display: none;"/>
<img id="backgroundImg"/>
<div class="pieceImgModel" id="imgsortable">
<div class="pieceImgBox1">
<img id="pieceTargetImg1" style="display: none"/>
<div class="se"></div>
<span class="upImg1">上传图片</span>
<input type="file" id="pieceFileImg1" style="display: none;"/>
</div>
<div class="pieceImgBox2">
<img id="pieceTargetImg2" style="display: none" />
<div class="se"></div>
<span class="upImg2">上传图片</span>
<input type="file" id="pieceFileImg2" style="display: none;"/>
</div>
<div class="pieceImgBox3">
<img id="pieceTargetImg3" style="display: none" />
<div class="se"></div>
<span class="upImg3">上传图片</span>
<input type="file" id="pieceFileImg3" style="display: none;"/>
</div>
</div>
</div>
<img id="jg" src="">
<div class="button_box">
<button type="button" class="imgBtn" >合成图片</button>
</div>
</div>
文件目录结构
建议适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。