javascript - 将 Dropzone File 对象转换为 base64 字符串

Question

我正在尝试使用 JSON 发送 Dropzone 文件，因此我想将图像解码为 base64我尝试过这个功能:

function getBase64Image(imgElem) {
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

现在，我为 Dropzone 编写此内容来测试 base64 转换器

$("form#dropzone").dropzone({
    url: allPaths.baseUrl + 'Services/PictureUpload.asmx/HandleFileDropped',
    uploadMultiple: true,
    autoProcessQueue: false,
    acceptedFiles: "image/*",
    init: function() {
        this.on("addedfile", function(file) {
            console.log(getBase64Image(file));
        });
    }    
});

我收到文件对象无效的错误

Answer 1

我发现file.DATAURL已经有base64(不需要上述函数)所以我将在这里发布我的解决方案:

 $("form#dropzone").dropzone({
        url: allPaths.baseUrl + 'Services/PictureUpload.asmx/HandleFileDropped',
        uploadMultiple: true,
        autoProcessQueue: false,
        acceptedFiles: "image/*",
        init: function() {
            this.on("addedfile", function (file) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    // event.target.result contains base64 encoded image
                    var base64String = event.target.result;
                    var fileName = file.name
                    handlePictureDropUpload(base64String ,fileName );
                };
                reader.readAsDataURL(file);

            });
        }

    });