我正在使用JavaScript Croppie库来创建一个图像裁剪器。我的任务是添加按钮，让用户可以选择裁剪到特定的宽高比，而不是自己调整大小(我目前包含的选项是9 × 16、1 × 1和16 × 9)。为了做到这一点，我编写了一个名为changeSize的函数，该函数将传递给照片裁剪器的新宽度和新高度。这是有效的，但唯一的问题是，每次我点击不同的宽高比按钮时，它都会让我重新上传图像。我该如何解决这个问题?也许通过将图像保存为变量?不确定。以下是我的代码供参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Croppie</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>
<script src=""></script>
<style type="text/css">
#croppie-demo {
width: 350px;
}
#croppie-container {
padding-top: 30px;
padding-left: 160px;
}
#croppie-view {
background: #e1e1e1;
width: 450px;
padding-left: 40px;
height: 450px;
}
#size-changers {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Croppie</h2>
<div class="row">
<div class="col-md-4 text-center">
<div id="croppie-demo"></div>
</div>
<div class="col-md-4" id="croppie-container">
<strong>Select Image:</strong>
<br/>
<input type="file" id="croppie-input">
<br/>
<button class="btn btn-success croppie-upload">Upload Image</button>
<div id="size-changers">
<p>Aspect Ratio: </p>
<button type="button" onclick="changeSize(250, 250)">1</button>
<button type="button" onclick="changeSize(444, 250)">16/9</button>
<button type="button" onclick="changeSize(250, 444)">9/16</button>
</div>
</div>
<div class="col-md-4" style="">
<div id="croppie-view"></div>
</div>
</div>
</div>
<script type="text/javascript">
function changeSize(newWidth, newHeight) {
// reload the croppie thing with new width and height
$('#croppie-demo').croppie('destroy'); // might need to get rid of this
croppieDemo = $('#croppie-demo').croppie({
enableOrientation: true,
enableResize: true,
viewport: {
width: newWidth,
height: newHeight,
type: 'square' // or 'circle'
},
boundary: {
width: 450,
height: 450
}
});
}
var croppieDemo = $('#croppie-demo').croppie({
enableOrientation: true,
enableResize: true,
viewport: {
width: 250,
height: 250,
type: 'square' // or 'circle'
},
boundary: {
width: 450,
height: 450
}
});
$('#croppie-input').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
croppieDemo.croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(this.files[0]);
});
$('.croppie-upload').on('click', function (ev) {
croppieDemo.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (image) {
html = '<img src="' + image + '" />';
$("#croppie-view").html(html);
});
});
</script>
</body>
</html>
它使您重新上传图像，因为您正在破坏Croppie实例并在更改宽高比时重建它。为了解决这个问题，你可以将图像保存到一个全局变量中，当你重新初始化Croppie时，当长宽比改变时加载它。
var uploadedImage = null;
// saving uploaded image on global variable
$('#croppie-input').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
croppieDemo.croppie('bind', {
url: e.target.result
});
// saving the image to a global variable
uploadedImage = e.target.result;
}
reader.readAsDataURL(this.files[0]);
});
// loading saved image on aspect ratio change
function changeSize(newWidth, newHeight) {
// reload the croppie thing with new width and height
$('#croppie-demo').croppie('destroy'); // might need to get rid of this
croppieDemo = $('#croppie-demo').croppie({
enableOrientation: true,
enableResize: true,
viewport: {
width: newWidth,
height: newHeight,
type: 'square' // or 'circle'
},
boundary: {
width: 450,
height: 450
},
// loading the image from saved image
url: uploadedImage
});
}