Question

我有这段代码

<form id="memeForm" method="post">
    {{ csrf_field() }}

</form>

我希望将canvas保存为图像并将其发送到我的php代码

e.preventDefault();
$('#imgForm').attr('action', "/upload.php").submit();

由于我使用id为'img'的输入来存储图像数据，因此输入最大值为521kb，这不会是一个问题，根据这篇文章：Why is the default max length for an input 524288?

我注意到在Canvas生成的chrome图像中有不同的代码，然后是Firefox中的代码。我可以用其他方式发送图片吗？

Answer 1

我不认为发送从画布中提取的图像有不同的方法。 Chrome和Firefox有不同的代码，因为如果你仔细观察，你会发现画布渲染略有不同。他们没有使用完全相同的算法进行渲染，因此微小的差异可能会导致抗锯齿，抖动等类似1或2位不同的效果 - 足以生成完全不同的代码，因为JPG使用特定的算法受每个像素影响（颜色空间优化等）。

容易避免字段限制的问题。只需将每个512Kb的字符串拆分，然后计算你有多少个片段，最后在表单中创建DOM节点：

var i, node, fragments;

// imagine "fragments" to be the array of the splitted dataURL
fragments = [ "gjwoituwe...", "4r1njhjfrqwf...", "e123jeiod..." ];

for (i = 0; i < fragments.length; i++)
{
  node = $("<input type='hidden' name='fragment_" + i + "'>").val(fragments[i]);
  $("#memeForm").appendChild(node);
}

您将收到这些片段：

$_POST['fragment_0']
$_POST['fragment_1']
$_POST['fragment_2']
...

您现在可以将这些片段放在服务器上以获取完整的dataURL。

您应该删除此时的静态#meme字段并修复其余代码。

如何使用toDataURL将图像从canvas发送到php

1 个答案: