摘要:
我正在尝试通过表单字段输入传递base64编码的图像数据。我的代码在我测试过的所有浏览器上都能正常运行,但是在Google Chrome上,后期提交的CPU滞后时间非常严重-其长度与提交的数据的长度成正比。
细节:
我在做什么:
我的网站上有一个SVG编辑器,用户可以在其中创建要保存到其个人资料的图像。用户完成工作后,点击“保存”-这将启动一些JavaScript,以通过canvas.toDataURL()将SVG转换为编码数据字符串,将其存储在隐藏的输入字段中,提交表单,然后返回用户概述他们的设计。
有什么问题?
该代码本身似乎可以在Firefox和Google Chrome上正常运行。不论data_string大小如何,Firefox页面加载都需要1-2秒。但是,在Google Chrome浏览器上,加载“概述”页面所需的时间与在隐藏字段中提交的数据字符串的大小成正比。
例如,如果我截短各种长度的数据字符串,则会收到不同的页面加载时间:
测试图片1:
5000个字符-1.78秒
50000个字符-8.24秒
73198个字符-11.67秒(不被截断)
测试图片2:
5000个字符-1.92秒
50000个字符-8.79秒
307466个字符-42.24秒(未截断)
我的问题:
延迟是不可接受的(因为大多数图像的大小至少为100k);有谁知道Google Chrome的功能吗?
我想重申一下,无论使用什么浏览器,服务器的响应速度都相同。绝对是Google Chrome浏览器的客户端特定问题。
我也将感谢其他建议。我花了一些时间试图让浏览器愚弄,以为数据是文件上传(通过将文本输入更改为文件输入字段,然后手动尝试形成数据并通过javascript提交),但我似乎无法使Django能够识别伪造的文件(因此错误,认为没有文件上传)。
最佳答案
摘要
将上述数据放入实际输入字段后,谷歌浏览器似乎无法处理大量数据。我怀疑Chrome尝试清理用于显示数据的内存是一个问题。
细节
通过完全消除客户端表单,并通过javascript XMLHttpRequest提交数据(就像我在问题末尾提到的那样),然后将用户重定向到下一个页面,我能够实现一种解决方法。 AJAX回调。
我永远无法让Django识别手动形成的FileField对象(作为multipart / form-data),但是我能够使它接受手动形成的CharField字符串(这是我的base64编码的画布数据)。
由于数据永远不会放入输入字段中,因此Google Chrome浏览器会立即做出响应。
希望对任何遇到类似问题的人有所帮助。