通过表单传递base64编码的图像
Passing base64 encoded image through form
我正在使用图像编辑工具供用户上传他们的图像并进行调整: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 而不是提交,如果它在移动浏览器中有长度限制,则不需要 hidden_field。如果您在服务器端不需要它,也不需要 Base64 编码开销。
.post(
"/ajaxpostURL.php",
{
new_image: processed, // or new_image: src,
other_form_param_or_data: 'some_data'
}
);
我正在使用图像编辑工具供用户上传他们的图像并进行调整: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 而不是提交,如果它在移动浏览器中有长度限制,则不需要 hidden_field。如果您在服务器端不需要它,也不需要 Base64 编码开销。
.post(
"/ajaxpostURL.php",
{
new_image: processed, // or new_image: src,
other_form_param_or_data: 'some_data'
}
);