问题描述
我正在尝试使用 Canvas 的 DataURL(使用 JavaScript)创建图像.当用户点击提交时,该值会被发送到一个输入类型的文本标签(例如,),然而,显然在 Chrome 上,当它的长度为 524,288 个字符.
我将它发送到输入标签,因为我需要在 PHP 中获取值(作为 $_POST['dataurltext'];),以便我可以创建一个图像并将其上传到我的网络服务器.>
关于如何绕过这个长度的任何想法?
我应该改用评论框吗?
感谢您的帮助,不胜感激.
Try sent canvas as Blob at javascript;使用 fopen() 和 php://input 作为参数来读取 Blob、stream_copy_to_stream 或 file_get_contents() , file_put_contents() 在 php
处处理文件参见 HTMLCanvasElement.toBlob()
if (!HTMLCanvasElement.prototype.toBlob) {Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {价值:功能(回调,类型,质量){var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),len = binStr.length,arr = new Uint8Array(len);for (var i=0; i除了 $_POST, $_GET和 $_FILE:在 JavaScript 和 PHP 中使用 Blob
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.
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.
解决方案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
See 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); ?>