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

want to store the processed image into the server itself rather than downloading it to local system using fengyuanchen jquery cropper plugin

本文关键字：jquery cropper fengyuanchen 插件 下载 图像 处理 存储 服务器 希望      更新时间：2023-09-26

我在我的一个项目中使用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数据?

这是示例

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});
}
相关文章：