通過表單傳遞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發布而不是提交，如果它在移動瀏覽器中具有長度限制，則不需要hidden_​​field。 如果您不需要服務器端的Base64編碼開銷，則也不需要。

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