javascript - 通过表单传递base64编码的图像

Question

我正在使用图像编辑工具供用户上传图像并进行调整:http://foliotek.github.io/Croppie/

我可以通过几个函数发送 base64 字符串来缩短它。然后我尝试将其插入隐藏字段并提交表单。

$('#submit-update-business').on('click', function(e){
    e.preventDefault();
    // console.log(vanilla.get());
    vanilla.result('canvas', 'viewport', 'png', 0).then(function(src){
        var processed = Base64.encode(JSON.stringify(src));
        $('#new_image').val(processed);
        $('#update-business').submit();
    });
});

我知道字符串很长，但我想不出任何其他方法来做到这一点。我还看到建议通过 ajax 提交表单的答案，但这似乎有相同的陷阱。这实际上可以在桌面浏览器上正常工作。是手机有问题。我可以将图像的尺寸限制为小于 3000x3000，但不幸的是手机似乎可以拍摄更高质量的照片。

我正在使用的工具 Croppie 有一种方法可以获取数据点和缩放，但不能获取方向。如果有一种方法可以保存这些数据，或者使用 base64 数据，然后重新渲染图像，并以某种方式使用该图像，以便图像真正通过，那就太好了。如果有一个我可以仅用于移动设备的解决方案，那么它也可以工作，因为它在桌面上工作得很好。

Answer 1

使用 ajax post 而不是提交，如果移动浏览器中有长度限制，则不需要隐藏字段。如果您在服务器端不需要 Base64 编码开销，则也没有必要。

.post(
  "/ajaxpostURL.php",
  {
    new_image: processed, // or new_image: src,
    other_form_param_or_data: 'some_data'
  }
);