保存裁剪圖像從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; 
}