从NG-SRC保存裁剪图像

问题描述：

我已经与 ngImgCrop 和Accept文件POST

图片栽跟头采用NG-SRC显示裁剪后的图像的例子：

The image cropper uses ng-src to display an example of the cropped image:

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

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

I want to save that cropped image. My problem is in the front-end, I have no idea where to and how to go from here.

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

Is there a way to save that cropped image?

答

假设你知道如何上传文件：以base64字符串转换为BLOB。使用文件上传文件是用额外的属性一个blob，所以上传一个blob的工作原理相同。

Assuming you know how to upload a file: Convert the base64 string to a blob. A file using a file uploader is a blob with extra properties, so uploading a blob works the same.

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

从NG-SRC保存裁剪图像

相关推荐