Как выбрать файл, исправить ориентацию и добавить на холст

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

Я думаю, что мне нужно сделать, это:

Пусть пользователю выбрать файл для загрузки
Check/Фиксируем ориентацию
Отобразите изображение в холст
Преобразование холст в base64 (загрузить в Firebase)
загружать элемент в

Пусть пользователю выбрать файл для загрузки

$(document).on('change','#fileUpload',function(e) { 
    correctImageOrientation(e); 
});

Проверить/исправить ориентацию изображения

Я использую имиджевую нагрузку (link) для моих изменений ориентации.

function correctImageOrientation(e) { 

    loadImage(
     e.target.files[0], 
     function (img) { 
      // document.body.appendChild(img); // Note: this successfully appends the image in the correct orientation to the body - but I need to do this to a canvas to I call: 
      addImageToCanvas(img); 
     }, 
     { 
      orientation: true 
     } 
);

Показать изображение в холст

Эта часть не удается. Если я пройду в выбранном файле, используя e.target.files [0] и создав объектURL, тогда он будет работать. Вот почему я думаю, что img, который я передаю, нужно читать/отображать на холсте по-разному.

function addImageToCanvas(img) { 
    img.onload = function() { 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(img, 0, 0, 300, 300); 
     console.log("Ending img.onload"); // This is never reached 
    } 
}

Затем я могу успешно преобразовать файл в base64 и загрузить в Firebase.

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

EDIT: Чтобы сохранить изображение в firebase, я использую this, чтобы преобразовать изображение обратно в blob.

источник

2017-02-04 bwash70

Firebase Storage позволяет загружать файлы из Интернета без (невероятно расточительного) кодирования base64. См. Https://firebase.google.com/docs/storage/web/start –

Привет @FrankvanPuffelen - Спасибо за ответ. Я могу загрузить изображение без каких-либо проблем, но если я сначала хочу исправить ориентацию, тогда мне нужно преобразовать его в холст, чтобы использовать load-image для проверки ориентации. Наверное, я мог бы преобразовать его обратно в образ, поэтому я попробую, но у вас есть другое предложение для этого? например я иду об этом неправильно? – bwash70

Я заменил addImageToCanvas с приведенной ниже функцией, а затем изменен с David Walsh's site. Поскольку я передаю изображение, мне нужно было преобразовать его в холст.

function convertImageToCanvas(image) { 
    var canvas = document.getElementById("canvas"); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext("2d").drawImage(image, 0, 0); 
}

источник

2017-02-04 23:58:38 bwash70

Как выбрать файл, исправить ориентацию и добавить на холст

ответ

Смежные вопросы