希望将处理后的图像存储到服务器本身，而不是使用fengyuanchen jquery cropper插件将其下载到本地系

Question

我在我的一个项目中使用fengyuanchen jquery cropper插件进行图像处理。该插件旨在将图像处理后的图像下载到本地系统。实际上我想将处理后的图像存储到服务器本身，而不是将其下载到本地系统。为此，我需要在文本区域中获取处理图像的URI数据。我必须在插件代码中做什么修改来生成URI数据而不是下载?

项目中有三个名为index.php、crop .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>

在main.js中生成下载数据的jquery代码片段如下:

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

代码中的哪些修改将生成URI数据?

Answer 1

这是示例

dataURI转换成blob。作为blob文件发送给它，保存在服务器上，然后下载图像DataURI到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});
}