canvas 太大了（6000*6000）然后在手机上 toBlob 的时候，手机浏览器会崩溃，获取不到 blob object，有什么办法处理吗？
coolair 2019 年 1 月 25 日 2816 次点击这是一个创建于 2567 天前的主题，其中的信息可能已经有所发展或是发生改变。
用 javascrip 临时创建一个 canvas 然后用 fabric 载入数据，想生成指定大小的图片，传给服务器，但是在手机上，当指定图片太大时，手机浏览器就崩溃了，有什么好办法吗？
代码如下，代码在 PC 上没有问题，但是在手机上，alert(blob) 就是 null，但是把 width 和 height 缩小到 2000 以内就没问题：
<!DOCTYPE html> <html> <head> </head> <body> <script src="https://cdn.staticfile.org/fabric.js/2.6.0/fabric.min.js"></script> <script> var text_json = '{"version":"2.6.0","objects":[{"type":"i-text","version":"2.6.0","originX":"center","originY":"center","left":2689.368365180467,"top":2343.557898089172,"width":53.26,"height":45.2,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"AAAAAAAAAAAAAAA","fontSize":483.4819532908705,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"centeredRotation":true,"hasControls":false,"borderColor":"red","styles":{}}],"centeredRotation":false}'; var temp = document.createElement('canvas'); var canvas = new fabric.Canvas(temp, {width: 6000, height: 6000}); canvas.loadFromJSON(text_json, canvas.renderAll.bind(canvas)); temp.toBlob(function(blob) { alert(blob); // 这里在手机上显示 null，在 pc 上没有问题 var newImg = document.createElement('img'); url = URL.createObjectURL(blob); newImg.src = url; newImg.style.height = '600px'; document.body.appendChild(newImg); }); </script> </body> </html>  | 1 momocraft 2019 年 1 月 25 日 也许分成几块小的? 不过这个例子中为什么不直接传 JSON 呢 |
 | 3 GDC 2019 年 1 月 25 日 via iPhone @coolair 要不来解决服务器为啥不能生成图片…？感觉比 canvas 这问题好解决，而且解决了还可以大幅降低数据传输量，你知道 6000×6000 无压缩的图片有多大么… |
 | 4 coolair OP |
| 5 GDC 2019 年 1 月 25 日 @coolair 看看 https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element 这个问题，第一个答案的评论里有提到 iOS 上的最大尺寸，可以作为参考 |
 | 6 MozzieW 2019 年 1 月 25 日 6000*6000*4/1024/1024 = 137.329101563 (MB) 算一下, 就算 App 有 300M 内存, 这个 Canvas 就占了差不多一半. 后面 toBlob 再耗一点, 应该内存就爆了(OOM)? 无压缩的 RGB 位图, 不管里面多少个字, 占用内存都一样. 什么情景几个字要用 6000*6000 来显示? |
 | 7 daben1990 2019 年 1 月 25 日 先上传。。。 |
| 9 GDC 2019 年 1 月 25 日 |
 | 11 joyme 2019 年 1 月 25 日 浏览器对 canvas 的大小有限制，不同的浏览器限制还不同，比如 firefox 比 chrome 的限制就严格的多。 要么你考虑减少 canvas 的大小，或者分成多个部分绘制。 要么就是服务器渲染。服务器渲染这一块可以直接使用绘图库去绘制。或者是使用无头浏览器的方案也很方便 |
 | 12 sharkrice 2019 年 1 月 25 日 我记得同事也有做类似的，最后分成几块绘制 |
 | 13 baze 2019 年 1 月 25 日 用瓦片分别绘制 |
Select Language