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

我收到File对象无效的错误

Answer 1

我使用了不同的方法，因为我在Ajax中保存了一个json对象。

首先，我声明了一个全局数组。

images = [];

我这样访问了dropzone区域中的文件，并将其推送到我的阵列图像中。

 for (var i = 0; i < $animalImage.files.length; i++) {
            images.push($animalImage.files[i]);
        }

第二，我将该数组添加到我的json对象（动物）中，并将其与我在Model（asp.net C＃）中期望的信息映射起来

 animal.Pictures = $.map(images, function (img) {
            return {
                base64: img.dataURL.replace(/^data:image\/[a-z]+;base64,/, ""),
                fileName: img.name,
                type: img.type
            };
        });

如您所见，我映射了base64，即我从图像中获得的信息。

希望有帮助。

Answer 2

我发现file.DATAURL已经具有base64（不需要上述功能），因此我将在此处发布我的解决方案：

dt.Rows(i)

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

2 个答案: