Croppie:如何获得JPEG格式的输出图像，而不是默认的PNG格式

Question

我使用croppie在我的laravel应用程序中上传图像。上传部分工作完美。然而，由于PNG图像比原始图像占用更多的空间。我想把jpeg图像存储在服务器上，而不是PNG，并提供我自己的质量参数。

以下是我使用croppie上传图像时使用的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);
})
});

Answer 1

我不久前也遇到过类似的问题。

我根据文档使用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){ ...

Answer 2

使用：

croppie.result({
type: 'base64',
format: 'jpeg',
viewport:'original',
quality:1,
circle: false
}).then(function (base64) {
...