问题描述
我发现这支笔 https://codepen.io/dimmby/details/PvWbQX 需要在我的项目中使用。该代码正是我所需要的，因此我将其集成到我的网站中。问题是，我不知道如何将裁剪后的图像上传到服务器。这是我的代码：
var c;
var galleryImagesContainer = document.getElementById('galleryImages');
var imageCropFileInput = document.getElementById('imageCropFileInput');
var cropperImageInitCanvas = document.getElementById('cropperImg');
var cropImageButton = document.getElementById('cropImageBtn');
// Crop Function On change
function imagesPreview(input) {
var cropper;
galleryImagesContainer.innerHTML = '';
var img = [];
if (cropperImageInitCanvas.cropper) {
cropperImageInitCanvas.cropper.destroy();
cropImageButton.style.display = 'none';
cropperImageInitCanvas.width = 0;
cropperImageInitCanvas.height = 0;
}
if (input.files.length) {
var i = 0;
var index = 0;
for (let singleFile of input.files) {
var reader = new FileReader();
reader.onload = function(event) {
var blobUrl = event.target.result;
img.push(new Image());
img[i].onload = function(e) {
// Canvas Container
var singleCanvasImageContainer = document.createElement('div');
singleCanvasImageContainer.id = 'singleImageCanvasContainer' + index;
singleCanvasImageContainer.className = 'singleImageCanvasContainer';
// Canvas Close Btn
var singleCanvasImageCloseBtn = document.createElement('button');
var singleCanvasImageCloseBtnText = document.createTextNode('Close');
// var singleCanvasImageCloseBtnText = document.createElement('i');
// singleCanvasImageCloseBtnText.className = 'fa fa-times';
singleCanvasImageCloseBtn.id = 'singleImageCanvasCloseBtn' + index;
singleCanvasImageCloseBtn.className = 'singleImageCanvasCloseBtn';
singleCanvasImageCloseBtn.onclick = function() {
removeSingleCanvas(this)
};
singleCanvasImageCloseBtn.appendChild(singleCanvasImageCloseBtnText);
singleCanvasImageContainer.appendChild(singleCanvasImageCloseBtn);
// Image Canvas
var canvas = document.createElement('canvas');
canvas.id = 'imageCanvas' + index;
canvas.className = 'imageCanvas singleImageCanvas';
canvas.width = e.currentTarget.width;
canvas.height = e.currentTarget.height;
canvas.onclick = function() {
cropInit(canvas.id);
};
singleCanvasImageContainer.appendChild(canvas)
// Canvas Context
var ctx = canvas.getContext('2d');
ctx.drawImage(e.currentTarget,0);
// galleryImagesContainer.append(canvas);
galleryImagesContainer.appendChild(singleCanvasImageContainer);
while (document.querySelectorAll('.singleImageCanvas').length == input.files.length) {
var allCanvasImages = document.querySelectorAll('.singleImageCanvas')[0].getAttribute('id');
cropInit(allCanvasImages);
break;
};
urlConversion();
index++;
};
img[i].src = blobUrl;
i++;
}
reader.readAsDataURL(singleFile);
}
}
}
imageCropFileInput.addEventListener("change",function(event) {
imagesPreview(event.target);
});
// Initialize Cropper
function cropInit(selector) {
c = document.getElementById(selector);
console.log(document.getElementById(selector));
if (cropperImageInitCanvas.cropper) {
cropperImageInitCanvas.cropper.destroy();
}
var allCloseButtons = document.querySelectorAll('.singleImageCanvasCloseBtn');
for (let element of allCloseButtons) {
element.style.display = 'block';
}
c.previousSibling.style.display = 'none';
// c.id = croppedImg;
var ctx = c.getContext('2d');
var imgData = ctx.getImageData(0,c.width,c.height);
var image = cropperImageInitCanvas;
image.width = c.width;
image.height = c.height;
var ctx = image.getContext('2d');
ctx.putImageData(imgData,0);
cropper = new Cropper(image,{
aspectRatio: 16 / 9,preview: '.img-preview',crop: function(event) {
cropImageButton.style.display = 'block';
}
});
}
// Crop Image
function image_crop() {
if (cropperImageInitCanvas.cropper) {
var cropcanvas = cropperImageInitCanvas.cropper.getCroppedCanvas({
width: 250,height: 250
});
// document.getElementById('cropImages').appendChild(cropcanvas);
var ctx = cropcanvas.getContext('2d');
var imgData = ctx.getImageData(0,cropcanvas.width,cropcanvas.height);
// var image = document.getElementById(c);
c.width = cropcanvas.width;
c.height = cropcanvas.height;
var ctx = c.getContext('2d');
ctx.putImageData(imgData,0);
cropperImageInitCanvas.cropper.destroy();
cropperImageInitCanvas.width = 0;
cropperImageInitCanvas.height = 0;
cropImageButton.style.display = 'none';
var allCloseButtons = document.querySelectorAll('.singleImageCanvasCloseBtn');
for (let element of allCloseButtons) {
element.style.display = 'block';
}
urlConversion();
} else {
alert('Please select any Image you want to crop');
}
}
cropImageButton.addEventListener("click",function() {
image_crop();
});
// Image Close/Remove
function removeSingleCanvas(selector) {
selector.parentNode.remove();
urlConversion();
}
// Get Converted Url
function urlConversion() {
var allImageCanvas = document.querySelectorAll('.singleImageCanvas');
var convertedUrl = '';
for (let element of allImageCanvas) {
convertedUrl += element.toDataURL('image/jpeg');
convertedUrl += 'img_url';
}
document.getElementById('profile_img_data').value = convertedUrl;
}.myform {
width: 100%;
display: block;
overflow: hidden;
padding: 50px 100px;
}
.imageset {
width: 100%;
overflow: hidden;
display: block;
margin-bottom: 30px;
}
#galleryImages,#cropper {
width: 100%;
float: left;
}
canvas {
max-width: 100%;
display: inline-block;
}
#cropper {}
#cropperImg {
/*max-width: 0; max-height: 0;*/
max-height: 300px;
}
#cropImageBtn {
display: none;
width: 100%;
margin: 30px 0px;
padding: 10px 10px;
background: #EEC900;
border: none;
}
.myform img {
width: 100%;
}
.img-preview {
float: left;
}
.singleImageCanvasContainer {
max-width: 300px;
display: inline-block;
position: relative;
margin: 2px;
}
.singleImageCanvasCloseBtn {
position: absolute;
top: 5px;
right: 5px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.js"></script>
<div class="myform">
<?php include('server/errors.php');?>
<form action="upload-vehicle.php" method="Post" enctype="multipart/form-data">
<div class="imageset">
<input type="file" id="imageCropFileInput" name="image[]" multiple accept=".jpg,.jpeg,.png">
<input type="hidden" id="profile_img_data" name="profile_img_data">
<div class="img-preview"></div>
<div id="galleryImages"></div>
<div id="cropper">
<canvas id="cropperImg" width="0" height="0"></canvas>
<button class="cropImageBtn" id="cropImageBtn" onclick="return false;">Crop</button>
</div>
</div>
<div class="buttongroup"><button name="uploadvehicle">Upload Vehicle</button></div>
</form>
</div>我曾尝试使用cropper.js 描述中提供的jquery 代码，但没有成功。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）