от тега IMG до ввода - PullRequest
Новая
       22

от тега IMG до ввода

0 голосов
/ 23 марта 2019

У меня есть изображение с base64 url ​​в качестве src.Я хотел бы отправить это изображение на сервер, используя входной файл (с формой).Итак, мне нужно преобразовать тег img во входной файл.

Я использую плагин Croppie для обрезки изображения.Затем результат записывается в тег img.

Я попытался преобразовать тег img в файл.Но тогда я не знаю, как преобразовать файл во входной файл. 

<div>
    <label for="img">Image</label><input type="file" name="img" id="img" value=""/>
</div>
<div>
    <img id="outImg" />
    <input type="file" name="imgtbn" id="imgtbn" value=""/>
</div>



 document.getElementById('img').onchange = function (evt) {
    var output = document.getElementById('outImg');
    output.src = URL.createObjectURL(evt.target.files[0]);


    if(this.c!=undefined)
    {
        this.c.destroy();
    }
    var el = document.getElementById('outImg');
    this.c = new Croppie(el, {
        viewport: { width: 300, height: 300 },
        boundary: { width: 900, height: 300 },
        showZoomer: false,
        enableOrientation: true,
        update: function (data) {
            this.result('base64').then(function(dataImg) {
                $('#imgCropped').attr('src', dataImg);

                img = document.getElementById('imgCropped');

                fetch(img.src)
                    .then(res => res.blob())
                    .then(blob => {
                        file = new File([blob], 'file', blob)
                        document.getElementById('imgtbn').file = file;
                    });
            })
        }
    });
};

Я хотел бы, чтобы входной файл был заполнен обрезанным изображением.

Спасибо за ваше время.

1 Ответ

1 голос
/ 23 марта 2019

Вы не можете. Вы можете не только использовать base64 в теге файла, но и только фактический файл, но вы даже не можете установить значение файла, введенного в Javascript. Это проблема безопасности.

Но почему ты хочешь? Если у вас уже есть файл, закодированный как base64, любой текстовый ввод подходит для отправки на сервер. Я бы, вероятно, использовал , потому что не имеет смысла отображать код. И если вы хотите предварительный просмотр, используйте тег img.

...