Question

用户上传一张照片，然后使用Croppie对其进行编辑和裁切。编辑并裁剪的版本是需要保存在后端的版本。

当前代码获取已编辑的图像，尽管将其保存在数据库中，但在获取时会显示已丢失的颜色/未显示颜色的已编辑图像（如下所示）

正在发送图片：

已获取图片：

这是代码：

<input id="uploadAvatar" type="file" name="file" accept="image/*" />

$('#uploadAvatar).on('change', function(){

     var reader = new FileReader();
     reader.onload = function (e) { 
          var blob = dataURItoBlob(e.target.result;);
          var fd = new FormData();
          fd.append("file", blob);

          //SERVICE HANDLES THE HTTP REQUEST
          httpUploadAvatarServ('../p3sweb/FileUploadServlet', fd, function (callback) { 
               console.log(callback)
          });
     }  

}

function dataURItoBlob(dataURI) { 

    var binary = atob(dataURI.split(',')[1]); 

    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg '});

}

问题

为什么图像失去质量/色彩？

Answer 1

我认为您的问题可能出在dataURItoBlob函数中。这是我在将croppie发送到服务器之前如何获取base64数据的方法。为了简化起见，尝试删节我的代码...希望我没有让它更糟：

function PlaceLargeImg (input, imgId, zindex) {
    var $imgel = $(imgId);

    var reader = new FileReader();
    reader.onload = function(e) {
        // Sets preview image src to the value of file input.
        $imgel.attr('src', e.target.result);

        // Bind croppie
        cropperlg.bind({
            url: $imgel.attr('src')
        });
        // On click method which crops and sets results to html input.
        $('.btn-crop-lg').on('click', () => {
            cropperlg.result({
                type: 'canvas',
                size: {width: 1000, height: 400}
            }).then(function(result) {
                $('#base64lg').val(result); // Resulting cropped img base64 that gets sent to server.
                $('#uploadLg').submit(); 
            });
        });
    };
    reader.readAsDataURL(input.files[0]);
}

编辑：如果在通过dataUritoBlob解析后在克林特侧预览中图像看起来不错，则问题出在服务器上。在这种情况下，您需要发布服务器端代码。

发送到后端时图像质量下降

1 个答案: