用 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>
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.