通过窗体传递base64编码的图像 - Passing base64 encoded image through form

Passing base64 encoded image through form

本文关键字：编码图像 base64 窗体 | 更新日期: 2024-05-23

我正在使用一个图像编辑工具，供用户上传图像并调整：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数据，重新渲染图像，并以某种方式使用该图像，使图像真正通过，那就太好了。如果有一个解决方案我可以只用于移动设备，那也可以，因为它在桌面上运行得很好。

如果ajax post而不是submit在移动浏览器中有长度限制，则不需要hidden_field。如果您在服务器端不需要Base64编码开销，那么也不需要它。

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