How to download blob in input?

Question

How to download blob in input?

Code html:

<img id="image" src="${pageContext.request.contextPath}/image/accaunt/user?${nowDate.time}"/>
<label id="text-add-photo" for="img-input">replace</label>
<input id="img-input" name="file" type="file" style="display: none;"/>

Code JS

const canvas = cropper.getCroppedCanvas();
const fileImage = canvas.toDataURL("image/jpg").replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
$("img-input").val(fileImage);

and it is not work...

Answer 1

After 4 months ago i'm can answer this question. This can be done by loading the bytes into another input field. Pre-attaching the listener to the old field.

It is my class. This class works in conjunction with cropper js. When you change the value in the input window opens, which allows you to crop the image. After that, from cropper js we get cropper.getCroppedCanvas (). ToDataURL () and in the field a new field will be assigned a value. This field must be processed on the server side:

class ModalImageLoader {

    constructor(data) {
        this.data = data;
    }

    init() {

        let MainClass = this;

             var parentDiv = $(this.data.parent_div);

             if (parentDiv.hasClass("load-modal-image"))  {
                 $(parentDiv).children("#modal-image-fone").remove();
             }

             parentDiv.addClass("load-modal-image");

             var foneModalImage = $('<div>', {id: 'modal-image-fone'});
             foneModalImage.addClass('off');
             parentDiv.prepend(foneModalImage);

             var modalImage = $('<div>', {id: 'modal-image'});
             modalImage.addClass('modal');
             modalImage.addClass('window');
             modalImage.addClass('white');
             foneModalImage.append(modalImage);

             var wrap = $('<div>', {id: 'wrapper-upt-image'});
             modalImage.append(wrap);

             var imageCropper = $('<img>', { id: 'img-crop' });
             modalImage.append(imageCropper);

             var wrapButtons = $('<div>');
             wrapButtons.addClass("wrap-buttons");
             modalImage.append(wrapButtons);

             var buttonCancel = $('<button>');
             buttonCancel.addClass('cancel');
             buttonCancel.addClass('orange');
             buttonCancel.html('назад');
             buttonCancel.click(function () { MainClass.cancel(); });
             wrapButtons.append(buttonCancel);

             var buttonAccept = $('<button>');
             buttonAccept.addClass('accept')
             buttonAccept.addClass('orange');
             buttonAccept.html('далее');
             buttonAccept.click(function () { MainClass.saveToDataUrl(); });
             wrapButtons.append(buttonAccept);

             this.addListenerForInput(this.data.props);
    }

    show() {
        $('.load-modal-image #modal-image-fone').removeClass('off');
    }

    hide() {
        $('.load-modal-image #modal-image-fone').addClass('off');
    }

    initCrop(props) {
        this.data.props = props;
        $('#img-crop').attr('src', props.src);

        if (props.aspWidth == undefined) props.aspWidth = 1;
        if (props.aspHeight == undefined) props.aspHeight = 1;

        var image = document.getElementById('img-crop');
        var cropper = new Cropper(image, {
            aspectRatio: props.aspWidth / props.aspHeight,
            movable: false,
            zoomable: false,
            rotatable: false,
            scalable: false
        });
        this.cropper = cropper;

        this.show();
    }

    open(props) {
        this.data.props = props;
        this.initCrop(props);
    }

    close() {
        this.cropper.destroy();
        $(this.data.props.input).prop('value', null);
        this.hide();
    }

    saveToDataUrl() {
        this.setBase64ForImage();
        $(this.data.props.input64).val(this.cropper.getCroppedCanvas().toDataURL());
        this.close();
    }

    setBase64ForImage() {
        $(this.data.props.img).attr('src', this.cropper.getCroppedCanvas().toDataURL());
    }

    cancel() {
        this.close();
    }

    addListenerForInput(props) {
        var MainClass = this;
        this.data.props = props;
        $(props.input).change(
            function(e){
                /*var input = $('#myFile')[0];
                var file = input.files[0];*/
                var file = e.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    MainClass.open({
                        src: e.target.result,
                        input: props.input,
                        img: props.img,
                        imgType: $(props.input)[0].files[0].type,
                        funSender: props.funSender,
                        input64: props.input64
                    });
                }
            });
    }

    /**
     * @deprecated with create new branch modal-image-loader
     */
    static sendBlob(path, method, blob) {
        var formData = new FormData();
        formData.append('file', blob);
        $.ajax({
            url: path,
            type: method,
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            cache: false,
            data: formData
        });
    }
}

This is converter (Java). You can paste this code in setter:

import org.apache.commons.io.IOUtils
import sun.misc.BASE64Decoder
import java.awt.image.BufferedImage
import java.io.ByteArrayInputStream

object ConverterUtils {

    fun convertBase64ToImage(base64Text: String): ByteArray {
        // tokenize the data
        val parts = base64Text.split(",")
        val imageString = parts[1]

        // create a buffered image
        val imageByte: ByteArray

        val decoder = BASE64Decoder()
        imageByte = decoder.decodeBuffer(imageString)
        val bis = ByteArrayInputStream(imageByte)
        val bytes =  IOUtils.toByteArray(bis)
        bis.close()
        return bytes
    }

}