从 ng-src 保存裁剪的图像答案

【问题标题】：Save cropped image from ng-src从 ng-src 保存裁剪的图像
【发布时间】：2015-04-29 13:01:08
【问题描述】：

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

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

我想保存裁剪后的图像。我的问题是在前端，我不知道从这里到哪里以及如何去。

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

【问题讨论】：

标签： javascript angularjs image

【解决方案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;
}

【讨论】：