Question

我在我的一个项目中使用fengyuanchen jquery cropper插件进行图像处理。该插件旨在在图像处理后将图像下载到本地系统。实际上我想将处理后的图像存储到服务器本身而不是将其下载到本地系统。为此，我需要在textarea中获取已处理图像的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>

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

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

1 个答案: