javascript - Laravel/Croppie 2.6.2:如何以 JPEG 而不是默认的 PNG 格式获取输出图像?
问题描述
我使用croppie 在我的laravel 应用程序中上传图像。上传部分完美无缺。但是,由于 PNG 图像比原始图像占用更多空间。我想将 jpeg 图像存储在服务器上而不是 PNG 上,并提供我自己的质量参数。
这是我使用croppie上传图像的javascript代码。
$(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').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);
})
});
我想要的很简单。我想将上传的图像保存为 JPEG 格式,并且我想根据我的需要为其分配质量参数,这样图像就不会占用太多空间。
我查阅了croppie文档。他们确实提供了格式和质量参数来解决它,但我不知道如何使用它。
format Indicating the image format.
Default:'png'
Valid values:'jpeg'|'png'|'webp'
quality Number between 0 and 1 indicating image quality.
Default:1
circle force the result to be cropped into a circle
Valid Values:truefalse
在这方面的任何帮助将不胜感激。
谢谢
解决方案
在result
方法中,您可以将格式作为第三个参数传递
croppie.result('base64', 'original', 'jpeg')
第二个参数是裁剪图像的大小。检查文档以获取有关可用参数的更多信息
编辑:质量是第四个参数,0 到 1 之间的数字表示图像质量。
推荐阅读
- java - 为 NON PLAY STORE APP 创建 CHECK_FOR_UPDATE 机制的最佳方法是什么
- python - 如何在 Pandas DataFrame 中取值两侧的平均值?
- php - 本地主机抛出 403 禁止错误 Apache Laravel
- python - 如何管理 python/selenium 中的错误?我接下来要继续学习的步骤是什么?
- python - 即使安装在 python/site-packages 文件夹中,也找不到 folium --version
- django - Django 管理界面上的多对多字段
- font-awesome - Font awesome pro 5.13.0 向后兼容吗?
- c# - 外键作为 NULL 传递。ASP .NET MVC
- google-cloud-platform - 如何获取 Google Cloud Vision API 徽标检测的置信度分数?
- c# - 如何提取两个字符之间的字符串?