以HTML表单提交画布数据 [英] Submit Canvas Data in an HTML Form

问题描述

如何在PHP CodeIgniter表单内提交 Canvas 内容?表单上的输入之一是用于绘图或网络摄像头照片的 Canvas .

How can I submit Canvas content inside a PHP CodeIgniter form? One of the inputs on my form is a Canvas for a drawing or webcam photo.

我创建了一个标签<输入名称="picture" type ="hidden"> 并将其值设置为base64内容:

I created a tag <input name="picture" type="hidden"> and set its value to the base64 content:

myPictureInput.value = canvas.toDataURL();

但是，当用户提交表单时，从< input> 读取的POST值将被截断为64kb.

However, when the user submits the form, the POST value read from the <input> is truncated to 64kb.

是否有一种最佳的方式来将图像与表单数据一起发布或提交?

Is there an optimal way to post or submit images together with form data?

推荐答案

如此答案中所述，您应该发送将画布分别存储到您的服务器，然后将表单提交功能放入完成的回调中.

As mentioned in this answer, you should send the canvas to your server separately, then put your form submit function inside of the done callback.

var dataURL = canvas.toDataURL();
$(function() {
    $(form).submit(function(e) {
          e.preventDefault();
          $.ajax({
              type: "POST",
              url: "script.php",
              data: { 
                 imgBase64: dataURL
              }
         }).done(function(o) {
              console.log('saved image'); 
              $.post(url, form.serialize(), function(data) {
                     console.log('saved form')
              };
    });

这篇关于以HTML表单提交画布数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！