如何在输入中下载 blob？

Question

如何在输入中下载 blob？

代码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;"/>

代码JS

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

这行不通...

Answer 1

4 个月前我可以回答这个问题。这可以通过将字节加载到另一个输入字段来完成。 Pre-attaching听老场

这是我的class。这个 class 与 cropper js 结合使用。当您更改输入中的值时，window 打开，允许您裁剪图像。之后，从cropper js我们得到cropper.getCroppedCanvas()。 ToDataURL() 和字段中的一个新字段将被赋值。该字段必须在服务器端处理：

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
        });
    }
}

这是转换器 (Java)。您可以将此代码粘贴到 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
    }

}

如何在输入中下载 blob？

How to download blob in input?

html

javascript

cropperjs