Могу ли я использовать Javascript для поворота и обрезки галереи изображений перед загрузкой? - PullRequest
Новая
       33

Могу ли я использовать Javascript для поворота и обрезки галереи изображений перед загрузкой?

0 голосов
/ 25 апреля 2019

Я пытался использовать программу чтения файлов и croppie, чтобы позволить пользователям редактировать свои изображения локально (масштабирование / поворот / обрезка) перед загрузкой, но не могу заставить его работать правильно.Я подозреваю, что это проблема DOM из-за модальности, но я не могу понять, как заставить ее работать! 


FileReader () stuff
//
//
//create elements for image, edit and delete buttons, then appending to parent div
//
//

//place the new image and button into the new div
newdiv.appendChild(newimage);
newdiv.appendChild(newedit);
newdiv.appendChild(newdelete);

//place the new div into the results div
output.appendChild(newdiv);

//add event listeners to dynamically created buttons
newdelete.addEventListener('click', delImage, false);
newedit.addEventListener('click', showModal, false);

.
.
.

function showModal(){
    var edit_id = this.getAttribute("dataset-editid");
    var image_id = document.getElementById('img-'+edit_id);
    var thisImage = image_id.src;
    $('#'+edit_id).click(function(){
        $("#cropImagePop").modal();
    });
    console.log(edit_id);
    console.log('image source: ' + image_id);
    var themodal = document.getElementById('cropImagePop');
    var theimage = document.getElementById('cropimage');
    var instance = new Croppie(theimage, {
        viewport: { width: 300, height: 300 },
        boundary: { width: 900, height: 600 },
        showZoomer: true,
        enableResize: true,
        url: thisImage
    });

}

Когда я нажимаю динамическую кнопку «Изменить» длялюбая заданная картинка, которую открывает модал, но фотография действительно большая (не остается в модале), и нет ограничивающей рамки для обрезки до ..

Вот скрипка: https://jsfiddle.net/noz2eb3y/

Также - я ни в коем случае не женат на Кроппи - если у кого-то есть отличная (работающая!) Библиотека javascript, о которой он знает, которая может масштабировать / поворачивать / обрезать изображения - я весь слух!

1 Ответ

0 голосов
/ 26 апреля 2019

Чтобы ответить на ваш вопрос: да, это возможно.

Проблема с модальным окном заключается в том, что вы забыли добавить ссылку croppie css.

Я исправил это в этой скрипке , а также добавил функцию для кнопки обрезки, чтобы обновить исходный элемент.

См. Следующий пример: 

$('#cropImageBtn').click(function(){
  instance.result('base64').then(function(base64) {
    image_id.src = base64;
    cleanModal();
  });
});
$('#closeImageBtn').click(function(){
    cleanModal();
});
function cleanModal()
{
  instance.destroy();
  $("#cropImagePop").modal("hide");
}

Следующие шаги, которые необходимо предпринять, если вы хотите загрузить изображение (я).

  1. Взгляните на jquery.ajax
  2. Отправка данных в кодировке base64 на ваш сервер
  3. Декодировать закодированные в base64 данные
  4. Сохранить файл изображения

Я бы также рекомендовал улучшить ваш код (он немного запутан).

...