0

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

4

1 回答 1

0

这是样本

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});
}
于 2016-09-08T18:00:50.973 回答