我不确定canvas尺寸是否有限制,但数据URL的大小有浏览器限制:Data URL size limitations。
你可以尝试使用Node.js + node-canvas(服务器端)重新创建画布。我一直在使用它们从canvas元素创建可打印的图像,到目前为止没有任何问题/限制使用toDataURL。
你是否在使用fabric.js库?我注意到你也在他们的论坛上发布了帖子。Fabric.js可以在Node.js中使用,并且有一个toDataURLWithMultiplier方法,它可以缩放canvas/context,允许您更改dataurl图像的大小。您可以查看该方法源代码以了解其工作原理。
编辑:
由于您正在使用fabric.js,我建议使用Node.js在服务器端处理画布到图像处理。您可以在此处找到有关如何在Node.js上使用fabric.js的更多信息:here。
这是一个简单的使用Node.js和express的服务器:
var express = require('express'),
fs = require('fs'),
fabric = require('fabric').fabric,
app = express(),
port = 3000;
var allowCrossDomain = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.configure(function() {
app.use(express.bodyParser());
app.use(allowCrossDomain);
});
app.options('/', function(req, res) {
res.send(200);
});
app.post('/', function(req, res) {
var canvas = fabric.createCanvasForNode(req.body.width, req.body.height);
console.log('> Loading JSON ...');
canvas.loadFromJSON(req.body.json, function() {
canvas.renderAll();
console.log('> Getting PNG data ... (this can take a while)');
var dataUrl = canvas.toDataURLWithMultiplier('png', req.body.multiplier),
data = dataUrl.replace(/^data:image\/png;base64,/, '');
console.log('> Saving PNG to file ...');
var filePath = __dirname + '/test.png';
fs.writeFile(filePath, data, 'base64', function(err) {
if (err) {
console.log('! Error saving PNG: ' + err);
res.json(200, { error: 'Error saving PNG: ' + err });
} else {
console.log('> PNG file saved to: ' + filePath);
res.json(200, { success: 'PNG file saved to: ' + filePath });
}
});
});
});
app.listen(port);
console.log('> Server listening on port ' + port);
服务器运行时,您可以向其发送数据(postData
)。
服务器期望 json
、width
和 height
来重新创建画布,并使用 multiplier
缩放数据URL图像。客户端代码可能如下所示:
当服务器正在运行时,您可以将数据发送给它 (postData
)。 服务器期望 json
、width
和 height
来重新创建画布,并使用 multiplier
缩放 data url 图像。客户端代码应该类似于以下内容:
var postData = {
json: canvas.toJSON(),
width: canvas.getWidth(),
height: canvas.getHeight(),
multiplier: 2
};
$.ajax({
url: 'http://localhost:3000',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(postData),
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
}
});
HTMLCanvasElement.toBlob
。 - Paul S.