保存ng-src中的裁剪图像

Question

我一直在使用ngImgCrop和Accept a File POST

图像裁剪器使用ng-src显示裁剪图像的示例：

ng-src="data:image/png;base64,...

我想保存裁剪后的图片。 我的问题出在前端，我不知道从哪里开始，怎么离开这里。

有没有办法保存裁剪的图像？

Answer 1

假设您知道如何上传文件：将base64字符串转换为blob。使用文件上传器的文件是具有额外属性的blob，因此上传blob的工作原理相同。

var file = dataURItoBlob(dataURI, 'image/png');


function dataURItoBlob(dataURI, type) {
    // convert base64 to raw binary data held in a string
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new Blob([ab], { type: type });
    return bb;
}