Question

我使用Croppie jQuery插件裁剪图像并返回以base64编码的裁剪图像。

我的代码如下：

$uploadCrop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
}).then(function (resp) {
    var blobBin = atob(resp.split(',')[1]);
    var array = [];
    for (var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
    }
    var file = new Blob([new Uint8Array(array)], {type: 'image/png'});
    //How to assign this to image
});

请帮帮我。

Answer 1

直接分配给img因为返回以base64编码的裁剪图像

http://foliotek.github.io/Croppie/

$uploadCrop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
}).then(function (resp) {
    $('#img_elem_id').attr('src', resp);
});

Answer 2

创建新图像并将图像源引用到blob，然后将图像附加到所需元素

var image = new Image();
image.src = URL.createObjectURL(file);
document.body.appendChild(image);

Answer 3

如果您将类型设置为 base64 ，请执行此操作

croppie.result({
    type: 'base64'
})
.then(function (resp) {
    image.src = resp;
});

如果您将类型设置为 blob ，请执行此操作

croppie.result({
    type: 'blob'
})
.then(function (resp) {
    image.src = URL.createObjectURL(blob, { oneTimeOnly: true });
});

如何将Croppie返回结果分配给IMG？

3 个答案: