使用Cropper.js只有javascript，我下面的脚本代码是相互冲突的

Question

我正在尝试制作一个自定义模型生成器。在这个脚本代码下面，我可以在浏览器中模拟而不使用ajax或其他东西。但当我尝试将其与crop .js集成时它会尝试使用ajax将图片保存在项目文件夹中。

我想要实现的是在页面中只有一个脚本代码，并选择图片后我希望它在打开模式中裁剪它，然后图片将被放置到它所属的位置(这是由脚本代码设置的)。

我事先感谢你的帮助。

crop .js脚本代码:

<script>
var $modal = $('#modal');
var image = document.getElementById('imageLoader');
var cropper;
$("body").on("change", "#imageLoader", function(e){
var files = e.target.files;
var done = function (url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$("#crop").click(function(){
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "upload.php",
data: {image: base64data},
success: function(data){
console.log(data);
$modal.modal('hide');
alert("success upload image");
}
});
}
});
})
</script>

Mockuping Codes(这也是第二个文件)

<script type="text/javascript">
var imageLoader = document.getElementById("imageLoader");
imageLoader.addEventListener("change", handleImage, false);
var canvas = document.getElementById("imageCanvas");
var ctx = canvas.getContext("2d");
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.crossOrigin = "*";
img.onload = function() {
canvas.width = 678;
canvas.height = 490;
ctx.drawImage(img, 87, 21, 505, 317);
var wm = new Image();
wm.crossOrigin = "*";
wm.onload = function() {
document.querySelector('#imgplaceholder').style.display = 'none';
ctx.drawImage(this, 0, 0, 678, 490);
var base64 = canvas.toDataURL("image/png");
var fileToSave = new Image();
fileToSave.onload = function() {
document.getElementById("img_div").appendChild(this);
};
fileToSave.src = base64;
};
wm.src =
"../devices/computer.png";
};
img.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
</script>

Answer 1

我编辑了代码并修复了它。

这是在上传之前裁剪图像的最终代码，而不是在png中模拟。

<script>
$(document).ready(function(){
var $modal = $('#modal');
var image = document.getElementById('sample_image');
var cropper;
$('#imageLoader').change(function(event){
var files = event.target.files;
var done = function(url){
image.src = url;
$modal.modal('show');
};
//if this condition is true: user has selected file
if(files && files.length >0)
{
reader = new FileReader();
reader.onload = function(event)
{
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});

$modal.on('shown.bs.modal', function(){
//when modal pop up on web page, than this code block will execude
cropper = new Cropper(image, {
viewMode: 1,
aspectRatio: 1.383,
preview: '.preview'
});
}).on('hidden.bs.modal', function(){
//when modal remove from web page, this code block will execute
cropper.destroy();
cropper = null;
});
//When we click on crop button, this code block will execute
$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width: 400,
height: 400
});

canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$modal.modal('hide');
var showcanvas = document.getElementById("imageCanvas");
var ctx = showcanvas.getContext("2d");
var img = new Image();
img.crossOrigin = "*";
img.onload = function() {
showcanvas.width = 678;
showcanvas.height = 490;
ctx.drawImage(img, 87, 21, 505, 317);
var wm = new Image();
wm.crossOrigin = "*";
wm.onload = function() {
document.querySelector('#imgplaceholder').style.display = 'none';
ctx.drawImage(this, 0, 0, 678, 490);
var base64 = showcanvas.toDataURL("image/png");
var fileToSave = new Image();
fileToSave.onload = function() {
document.getElementById("img_div").appendChild(this);
};
fileToSave.src = base64;
};
wm.src =
"../devices/computer.png";
};
img.src = event.target.result;
};
});
});

});
</script>