Как заменить содержимое входного файла результатом canvas.toDataURL? - PullRequest
Новая
       11

Как заменить содержимое входного файла результатом canvas.toDataURL?

0 голосов
/ 27 июня 2018

Следующий код (вдохновленный основным ответом HTML5 Предварительное изменение размера изображений перед загрузкой ) берет выбранный файл изображения из <input type="file">, повторно сжимает его в JPG с качеством 50% в переменную dataurl.

Вопрос: Как заменить содержимое <input type="file"> этим вновь сжатым файлом? Так что при отправке <form> это этот новый файл, который будет отправлен?

Примечание: я не хочу использовать AJAX для загрузки, но стандартный POST <form>. «Размещенный» файл должен быть dataurl, то есть он должен быть таким, как если бы файл, выбранный пользователем в <input type="file">, был файлом, сгенерированным dataurl. 

function doit() {
    var input = document.getElementById('file'),
        canvas = document.getElementById('canvas');
    var file = input.files[0];
    var img = document.createElement("img");
    var reader = new FileReader();  
    reader.onload = function(e) { img.src = e.target.result }
    reader.readAsDataURL(file);
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataurl = canvas.toDataURL("image/jpeg", 0.5);
    console.log(dataurl);
}    
<form action="/upload" method="post">
<input type="file" onchange="doit();" id="file" /><br><br>
<input type="submit" />
</form>
<canvas id="canvas" style="display: none" />

1 Ответ

0 голосов
/ 01 июля 2018

Кажется, мы не можем изменить <input type="file">, но мы можем добавить данные в другое текстовое поле (как рекомендовано @PatrickEvans) или <input type="hidden">: 

function doit() {
    var file = document.getElementById('file').files[0],
        canvas = document.getElementById('canvas'),
        hidden = document.getElementById('hidden'),
        ctx = canvas.getContext("2d"),
        img = document.createElement("img"),
        reader = new FileReader();  
    
    reader.onload = function(e) { 
        img.src = e.target.result;
    }
    
    img.onload = function () { 
        ctx.drawImage(img, 0, 0);
        hidden.value = canvas.toDataURL("image/jpeg", 0.5);
    }
    reader.readAsDataURL(file);
}
<input type="file" onchange="doit();" id="file" />

<form action="/upload" method="post">
<input type="hidden" id="hidden" />
<input type="submit" />
</form>

<canvas id="canvas" style="display: none" />

Поле hidden вывода в <form> закодировано в base64, то есть что-то вроде: 

data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
...