javascript - 有没有办法让 HTML Canvas 的大小不受限制

标签 javascript css html canvas

大家好,

我正在做一个用彩色线条表示数据的元素。

例如,如果您全天给我 300 个天空颜色样本。我想将它们绘制在这样的一条线上:

Single line of color data

左边的亮色表示白天,右边的暗色表示夜晚。

这很简单,但是对于我的真实元素,我有大约一百万个样本而不是 300 个。我想使用这些数据来制作一条与上面类似但 1,000,000 像素宽、16 高像素的线条。

它必须是图像格式,因为我将通过不同的图像压缩算法(即 jpg、jpg2000、webp 等)运行此图像,并在结果中搜索模式。

我想为此使用 HTMl Canvas,但是每个主流浏览器中 html canvas 的最大宽度远小于一百万。

Chrome:

最大高度/宽度:32,767 像素

火狐:

最大高度/宽度:32,767 像素

IE:

最大高度/宽度:8,192 像素

图片的总面积很正常,就是Canvas不喜欢的宽度。

有没有办法在浏览器中关闭这些限制?或者是否有另一种编程环境可以轻松设置以构建这样的图片?

感谢您的帮助!

最佳答案

如果这仅用于显示目的并且存在使用 JavaScript 的限制,那么理想的解决方案是将您的数据分成 block 并添加导航按钮。在特定时间仅显示图像的一部分,当有人导航 prev/next 时重新渲染您的图像。请参阅下面的模型

enter image description here

关于javascript - 有没有办法让 HTML Canvas 的大小不受限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47881705/

相关文章:

javascript - 手工编写的 Canvas 性能与引擎编写的 Canvas 性能

css - Suckerfish CSS 菜单无法扩展子菜单

html - 如何强制样式 HTML 元素?

javascript - 在 Safari 中上传图片不起作用

html - 在没有系统字体的环境中测试网页

html - 重新绘制 Html5 Canvas

javascript - React类组件中的同步Meteor调用

javascript - 跨平台SVG旋转动画:

javascript - CI 和 Angular4 : Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

css - 调整 SVG 动画的大小,同时保持它在容器中居中