хотите сохранить обработанное изображение в самом сервере, а не загружать его в локальную систему, используя плагин fengyuanchen jquery cropper

Question

Я использую плагин fengyuanchen jquery cropper для управления изображениями в одном из моих проектов. Этот плагин предназначен для загрузки изображения в локальную систему после обработки изображений. На самом деле я хочу сохранить обработанное изображение в самом сервере, а не загружать его в локальную систему. Для этого мне нужно получить данные URI обработанного изображения в текстовом поле. Какую модификацию я должен был сделать в коде плагина для генерации данных URI вместо загрузки?

Есть три файла в проекте с именем index.php, cropper.js и main.js

Код кнопки загрузки в index.php выглядит следующим образом:

<div class="btn-group btn-group-crop docs-buttons" style="margin-top:10px;"> 
    <a class="btn btn-primary" data-method="getCroppedCanvas" id="download">Generate your Facebook Cover Photo</a> 
</div> 

Соответствующий JQuery фрагмент кода, который генерирует данные загрузки в main.js выглядит следующим образом:

case 'getCroppedCanvas': 
if (result) { 
    // Bootstrap's Modal 
    if (!$download.hasClass('disabled')) { 
     $download.attr("href", result.toDataURL('image/jpeg')); 
    } 
} 

какие изменения в этом коде будет генерировать данные URI?

Answer 1

Это образца

dataURI преобразуется в сгустка. послать к нему в качестве двоичного объекта файла сохранить его на сервере, то загрузить изображение DataURI to BLOB

function dataURItoBlob(dataURI) { 
    var byteString; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteString = atob(dataURI.split(',')[1]); 
    else 
     byteString = unescape(dataURI.split(',')[1]); 

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

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

    return new Blob([ia], {type:mimeString}); 
}