尝试使用输入类型文本传递超过524288字节的ToDataURL [英] Trying to Pass ToDataURL with over 524288 bytes Using Input Type Text

问题描述

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

I am trying to create an image using DataURL of a Canvas (using JavaScript). When a user hits submit, the value gets sent to an Input type text tag (e.g., <input type='text'>), however, apparently on Chrome, the text gets cut off when it is at length 524,288 characters.

我将其发送到输入标签，因为我需要获取PHP中的值(作为$ _POST ['dataurltext'];)，以便创建图像并将其上传到Web服务器.

I am sending it to an input tag because I need to obtain the value in PHP (as a $_POST['dataurltext'];), so that I can create an image and upload it to my web server.

关于如何绕过这个长度的任何想法吗?

Any ideas on how to bypass this length?

也许我应该使用评论框吗?

Should I use a comment box instead, maybe?

感谢您的帮助，将不胜感激.

Thank you for any help, it will be greatly appreciated.

推荐答案

尝试在javascript处以Blob的形式发送canvas；使用fopen()和php://input作为参数来读取Blob，stream_copy_to_stream或file_get_contents()，file_put_contents()以在php

Try sending canvas as Blob at javascript; use fopen() with php://input as parameter to read Blob, stream_copy_to_stream or file_get_contents() , file_put_contents() to process file at php

请参见 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'} ) );
  }
 });
}

超出$ _POST，$ _ GET和$ _FILE:在JavaScript和PHP中使用Blob

<?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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！