尝试使用输入类型文本传递超过 524288 字节的 ToDataURL

Question

我正在尝试使用 Canvas 的 DataURL（使用 JavaScript）创建图像。当用户点击提交时，该值被发送到输入类型文本标签（例如，<input type='text'>），但是，显然在 Chrome 上，文本在长度为 524,288 个字符时被截断。

我将它发送到输入标签，因为我需要获取 PHP 中的值（作为 $_POST['dataurltext'];），以便我可以创建图像并上传它到我的网络服务器。

关于如何绕过这个长度有什么想法吗？

我应该改用评论框吗？

感谢您的帮助，我们将不胜感激。

Answer 1

尝试将 canvas 作为 Blob 发送至 javascript；使用 fopen() 和 php://input 作为参数来读取 Blob、stream_copy_to_stream 或 file_get_contents()、file_put_contents() 以处理 php[= 处的文件25=]

见HTMLCanvasElement.toBlob()

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

Beyond $_POST, $_GET and $_FILE: Working with Blob in JavaScript and PHP

<?php

// choose a filename
$filename = "hello.json";

// the Blob will be in the input stream, so we use php://input
$input = fopen('php://input', 'rb');
$file = fopen($filename, 'wb'); 

// Note: we don't need open and stream to stream, we could've used file_get_contents and file_put_contents
stream_copy_to_stream($input, $file);
fclose($input);
fclose($file);

?>

尝试使用输入类型文本传递超过 524288 字节的 ToDataURL

Trying to Pass ToDataURL with over 524288 bytes Using Input Type Text

php

jquery

canvas

input

todataurl