#javascript #jquery #html #croppie
#javascript #jquery #HTML #обрезка
Вопрос:
Я просмотрел документацию, которая мало что дает, и нашел несколько человек с такой же нерешенной проблемой. Я пытался использовать croppie для обрезки загруженных изображений перед фактической загрузкой. Функция обрезки работает нормально, но загружается исходная версия без обрезки. С тех пор я узнал, что мне нужно каким-то образом получить обрезанную версию, поскольку она не добавлена в форму. Оно преобразуется в base64, который я присвоил переменной, но я понятия не имею, как добавить его в данные формы. Любая помощь была бы замечательной, как всегда.
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: { width: 300, height: 400 }
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
var form = document.getElementById("add-event-form");
var ImageURL = resp // Split the base64 string in data and contentType
alert(ImageURL);
var block = ImageURL.split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."
// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// Create a FormData and append the file with "image" as parameter name
var formDataToUpload = new FormData(form);
formDataToUpload.append("image1", blob);
return ImageURL;
});
});
// End upload preview image
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset = sliceSize) {
var slice = byteCharacters.slice(offset, offset sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i ) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
Мне удалось найти нужные мне данные и сохранить их в ImageUrl, но мне нужно прикрепить это как данные к #add-event-form. Пожалуйста, помогите!
Комментарии:
1. добавьте в форму скрытый ввод и присвоите этому вводу значение base64. Легко сделать с помощью $().val();
2. Большое спасибо, это было достаточно просто сделать, чтобы получить значение base64. Теперь просто сохраните его!
3. вы можете сохранить его как base64 в базе данных и декодировать его при извлечении обратно во внешний интерфейс
4. это действительно хорошая идея, я вполне могу попробовать это.