如何解决Croppie:如何获取JPEG而不是默认PNG的输出图像?
我使用cropie在laravel应用程序中上传图像。上载部分完美无缺。但是,由于PNG图像比原始图像占用更多空间。我想将jpeg图像而不是PNG存储在服务器上,并提供自己的质量参数。
这是我用来通过裁剪上传图片的javascript代码。 但以PNG格式保存图像
$(function() {
var croppie = null;
var el = document.getElementById('resizer');
$.base64ImagetoBlob = function(str) {
// extract content type and base64 payload from original string
var pos = str.indexOf(';base64,');
var type = str.substring(5,pos);
var b64 = str.substr(pos + 8);
// decode base64
var imageContent = atob(b64);
// create an ArrayBuffer and a view (as unsigned 8-bit)
var buffer = new ArrayBuffer(imageContent.length);
var view = new Uint8Array(buffer);
// fill the view,using the decoded base64
for (var n = 0; n < imageContent.length; n++) {
view[n] = imageContent.charCodeAt(n);
}
// convert ArrayBuffer to Blob
var blob = new Blob([buffer],{ type: type });
return blob;
}
$.getimage = function(input,croppie) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
croppie.bind({
url: e.target.result,});
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file-upload").on("change",function(event) {
$("#myModal").modal();
// Initailize croppie instance and assign it to global variable
croppie = new croppie(el,{
viewport: {
width: 200,height: 200,type: 'circle'
},boundary: {
width: 250,height: 250
},enableOrientation: true
});
$.getimage(event.target,croppie);
});
$("#upload").on("click",function() {
croppie.result('base64','original','jpeg',0).then(function(base64) {
$("#myModal").modal("hide");
$("#profile-pic").attr("src","/images/ajax-loader.gif");
var url = "{{ url('/demos/jquery-image-upload') }}";
var formData = new FormData();
formData.append("profile_picture",$.base64ImagetoBlob(base64));
// This step is only needed if you are using Laravel
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'POST',url: url,data: formData,processData: false,contentType: false,success: function(data) {
if (data == "uploaded") {
$("#profile-pic").attr("src",base64);
} else {
$("#profile-pic").attr("src","/images/icon-cam.png");
console.log(data['profile_picture']);
}
},error: function(error) {
console.log(error);
$("#profile-pic").attr("src","/images/icon-cam.png");
}
});
});
});
// To Rotate Image Left or Right
$(".rotate").on("click",function() {
croppie.rotate(parseInt($(this).data('deg')));
});
$('#myModal').on('hidden.bs.modal',function (e) {
// This function will call immediately after model close
// To ensure that old croppie instance is destroyed on every model close
setTimeout(function() { croppie.destroy(); },100);
})
});
解决方法
我不久前也遇到过类似的问题。
我按照文档使用 jQuery 方式。 OP 也在其他地方使用 jQuery,所以...
Croppie 是这样附加的:
upload = $('#upload_div').croppie(method,args);
而不是像这样传递参数:
croppie.result('base64','original','jpeg',0).then(function(base64){...
您传递命名参数:
upload.croppie(
'result',{type: 'base64',size: 'original',format: 'jpeg',quality: 0
}).then(function(base64){ ...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。