我需要上传多个图片，比如打印场地网站，用于在拼贴画中显示从不同按钮上传图片，然后在裁剪后在页面上的不同div显示我已经制作了一个功能第一个图像完美显示在java脚本中的第二个函数中，它不起作用。
这是我的代码：
$(document).ready(function() {
$(".box").click(function() {
$(".previousBoxhide").hide();
$(".cropBoxhide").show();
});
});
$(document).ready(function() {
$(".save").click(function() {
$("#save-hide").hide();
});
});
$("#close").hide();
$(".previewBtn").click(function(e) {
$("#close").show();
$(".preview-image").addClass("previewcss");
$(".preview-inner").addClass("previewinnercss");
});
$("#close").click(function(e) {
$(".preview-image").removeClass("previewcss");
$(".preview-inner").removeClass("previewinnercss");
$("#close").hide();
});
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w2'),
img_h = document.querySelector('.img-h2'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e) => {
if (e.target.result) {
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', (e) => {
e.preventDefault();
// get result to data uri
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
dwn.classList.remove('hide');
dwn.download = 'imagename.png';
dwn.setAttribute('href', imgSrc);
});
$(document).ready(function() {
$(".box2").click(function() {
$(".previousBoxhide2").hide();
$(".cropBoxhide2").show();
});
});
$(document).ready(function() {
$(".save2").click(function() {
$("#save-hide2").hide();
});
});
$("#close2").hide();
$(".previewBtn2").click(function(e) {
$("#close2").show();
$(".preview-image2").addClass("previewcss");
$(".preview-inner2").addClass("previewinnercss");
});
$("#close2").click(function(e) {
$(".preview-image2").removeClass("previewcss2");
$(".preview-inner2").removeClass("previewinnercss2");
$("#close").hide();
});
let result = document.querySelector('.result2'),
img_result = document.querySelector('.img-result2'),
img_w = document.querySelector('.img-w22'),
img_h = document.querySelector('.img-h22'),
options = document.querySelector('.options2'),
save = document.querySelector('.save2'),
cropped = document.querySelector('.cropped2'),
dwn = document.querySelector('.download2'),
upload = document.querySelector('#file-input2'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e) => {
if (e.target.result) {
// create new image
let img = document.createElement('img2');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide2');
options.classList.remove('hide2');
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', (e) => {
e.preventDefault();
// get result to data uri
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
dwn.classList.remove('hide');
dwn.download = 'imagename.png';
dwn.setAttribute('href', imgSrc);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<section id="outer">
<div class="topbar">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h6>Customer Care</h6>
</div>
<div class="col-md-2">
<h6><i class="fa fa-phone"></i>001-3001-7676</h6>
</div>
<div class="col-md-4">
<h6 class="text-right"><i class="fa fa-inr"></i>Sign up & Save more</h6>
</div>
<div class="col-md-2">
<h6>Track Order</h6>
</div>
<div class="col-md-2">
<div class="col-md-4">
<h6>Login</h6>
</div>
<div class="col-md-8">
<h6><i class="fa fa-shopping-cart"></i>My Cart</h6>
</div>
</div>
</div>
</div>
</div>
<!-- topbar-->
<div id="mid-section">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 divCenter">
<div class="header">
<div class="col-md-12">
<div class="col-md-6">
<img src="img/website-logo.png" alt="logo" />
</div>
<div class="col-md-6">
<form>
<div class="form-group">
<input type="text" placeholder="Search for product, profession, design & more..." />
<button type="submit" class="btn btn-default search">Search</button>
</div>
</form>
</div>
</div>
</div>
<!--header-->
<div id="main-menu">
<nav class="col-md-12 navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">All<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Business Cards<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Office<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Clothing<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Accessories<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Gifts<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Home & Kitchen<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Greetings<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Brands Store<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="active"><a href="#">Sale</a></li>
</ul>
</div>
</nav>
</div>
<!-- main-menu -->
<div id="product-section">
<div class="col-md-12">
<div class="row">
<h3>Bistro DuoTone Photo Mug - Orange</h3>
</div>
<div class="row">
<div class="col-md-7">
<div class="product">
<div class="image">
<div class="preview-image"><span id="close">×</span></div>
<div class="preview-inner">
<img src="img/278.png" alt="tshirt" />
<div id="coverimg1" class="object" data-toggle="modal" data-target="#myModalphoto1">
<img src="img/139.png" alt="cover1" width="100%" height="auto" />
<div class="printimgbox1">
<div class="box-2 img-result hide">
<!-- result of crop -->
<img class="cropped" src="" alt="">
</div>
</div>
</div>
<div id="coverimg2" class="object" data-toggle="modal" data-target="#myModalphoto2">
<img src="img/139.png" alt="cover2" width="100%" height="auto" />
<div class="printimgbox2">
<div class="box-2 img-result2 hide2">
<!-- result of crop -->
<img class="cropped" src="" alt="">
</div>
</div>
</div>
<div id="coverimg3" class="object"><img src="img/139.png" alt="cover3" width="100%" height="auto" /></div>
<div id="coverimg4" class="object"><img src="img/139.png" alt="cover4" width="100%" height="auto" /></div>
<div id="coverimg5" class="object"><img src="img/139.png" alt="cover5" width="100%" height="auto" /></div>
<div id="coverimg6" class="object"><img src="img/139.png" alt="cover6" width="100%" height="auto" /></div>
<div id="coverimg7" class="object"><img src="img/139.png" alt="cover7" width="100%" height="auto" /></div>
<div id="coverimg8" class="object"><img src="img/139.png" alt="cover8" width="100%" height="auto" /></div>
</div>
</div>
</div>
<small>Note: Embroidery provides best results for LOGO and Text only, so please ensure uploaded photograph includes only logo or text.</small>
</div>
<div class="col-md-5">
<div class="col-md-12 product-description">
<h4>Personalize your design</h4>
<div class="col-md-6">
<div class="designbtn">
<span id="shirtModal" data-toggle="modal" data-target="#myModalshirt"><i class="fa fa-cloud-upload"></i>Upload photo 1</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalshirt2"><i class="fa fa-cloud-upload"></i>Upload photo 2</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto3"><i class="fa fa-cloud-upload"></i>Upload photo 3</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto4"><i class="fa fa-cloud-upload"></i>Upload photo 4</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto5"><i class="fa fa-cloud-upload"></i>Upload photo 5</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto6"><i class="fa fa-cloud-upload"></i>Upload photo 6</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto7"><i class="fa fa-cloud-upload"></i>Upload photo 7</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="designbtn">
<span class="shirtModal" data-toggle="modal" data-target="#myModalphoto8"><i class="fa fa-cloud-upload"></i>Upload photo 8</span>
<span id="deleteinput" style="float:right"><i class="fa fa-times"></i></span>
</div>
</div>
<form>
<div class="col-md-6 form-group">
<label>Quantity</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>10</option>
</select>
</div>
<div class="col-md-6 form-group">
<label>Price<span>Rs. 349</span></label>
</div>
<div class="col-md-12">
<div class="col-md-6 form-group">
<button type="button" class="btn btn-default previewBtn">Preview Design</button>
</div>
<div class="col-md-6 form-group">
<button type="submit" class="btn btn-default">Add to Cart</button>
</div>
</div>
<div class="col-md-12 form-group">
<div class="checkbox">
<input type="checkbox" value="">
<small>I acknowledge that all unedited text will be left blank and any other unedited
customization options will be disregarded in the final print. Please preview to confirm.</small>
</div>
</div>
<div class="col-md-12 form-group">
<input type="text" placeholder="Design Name" />
<span><a href="#">Save for later</a></span>
</div>
<div class="col-md-12 form-group">
<span><a href="#">Next Design <i class="fa fa-angle-right"></i></a></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--logo-section -->
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<!-- mid-section -->
<div class="bottombar">
<div class="container">
<div class="row">
<center>Copyright 2018.All Rights Reserved.</center>
</div>
</div>
</div>
</section>
<!-- Modal logo-->
<div id="myModalshirt" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload Logo</h4>
</div>
<div class="modal-body">
<div class="col-md-12 previousBoxhide">
<div class="col-md-4">
<p>Image Source Option</p>
<div class="box">
<span><i class="fa fa-cloud-upload"></i>Upload an Image</span>
<span class="left-input"><input type="file" id="file-input"></span>
</div>
</div>
<div class="col-md-8">
<div class="img-uploadbox">
<div class="imgicon"><img src="img/img-logo.png" alt="imglogo" /></div>
<div class="uploaddesc">
<h4>Click or Drag and Drop image here</h4>
<h6>Resolution:300 DPI</h6>
<h6>Image Size:344PX By 230PX / 91MM By 61MM</h6>
<h6>Image Formats: .png / .jpg / .tiff / .bmp</h6>
</div>
</div>
</div>
</div>
<!-- crop modal -->
<div class="col-md-12 cropBoxshow">
<div class="col-md-4">
<div class="boxx">
<div class="options hide">
<label> Width</label>
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save hide" data-dismiss="modal">Save</button>
<!-- download btn
<a href="" class="btn download hide">Download</a>-->
</div>
</div>
<div class="col-md-8">
<div class="box-2">
<div class="result"></div>
</div>
</div>
</div>
<!-- crop modal -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 logo-->
<div id="myModalshirt2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload 2 Logo</h4>
</div>
<div class="modal-body">
<div class="col-md-12 previousBoxhide">
<div class="col-md-4">
<p>Image Source Option</p>
<div class="box2">
<span><i class="fa fa-cloud-upload"></i>Upload an Image</span>
<span class="left-input"><input type="file" id="file-input2"></span>
</div>
</div>
<div class="col-md-8">
<div class="img-uploadbox2">
<div class="imgicon"><img src="img/img-logo.png" alt="imglogo" /></div>
<div class="uploaddesc">
<h4>Click or Drag and Drop image here</h4>
<h6>Resolution:300 DPI</h6>
<h6>Image Size:344PX By 230PX / 91MM By 61MM</h6>
<h6>Image Formats: .png / .jpg / .tiff / .bmp</h6>
</div>
</div>
</div>
</div>
<!-- crop modal -->
<div class="col-md-12 cropBoxshow">
<div class="col-md-4">
<div class="boxx">
<div class="options2 hide">
<label> Width</label>
<input type="number" class="img-w22" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save2 hide" data-dismiss="modal">Save</button>
<!-- download btn
<a href="" class="btn download hide">Download</a>-->
</div>
</div>
<div class="col-md-8">
<div class="box-2">
<div class="result2"></div>
</div>
</div>
</div>
<!-- crop modal -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>