如何解决使用 Croppie 库更改照片裁剪的纵横比时如何不必重新上传图像
我正在使用 JavaScript Croppie 库来创建图像裁剪器。我的任务是添加按钮,让用户可以根据需要选择裁剪成特定的纵横比,而不仅仅是自己调整大小(我包含的当前选项是 9 x 16、1 x 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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。