我对大画布的.toDataURL()有问题.我想在base64中进行enconde并在PHP文件上进行解码,但如果我有一个大画布,则strDataURI变量为空.
我的代码：
var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.substr(22,strDataURI.length);
$.post("save.PHP",{
str: strDataURI
};
是否有替代.toDataURL()或某种方式来改变大小限制？
谢谢.
解决方法
我不确定画布尺寸是否有限制,但数据网址有限制,具体取决于浏览器：
Data URL size limitations.
你可以尝试使用Node.js node-canvas(服务器端)来重新创建画布.我一直在使用它们从canvas元素创建可打印图像,到目前为止使用toDataURL没有任何问题/限制.
你在使用fabric.js库吗？我注意到你也发布在他们的论坛上.
Fabric.js可以在Node.js中使用,并且有一个toDataURLWithMultiplier方法,可以缩放画布/上下文,允许您更改dataurl图像大小.您可以检查方法源以了解如何完成此操作.
编辑：
由于您正在使用fabric.js,我建议使用Node.js来处理服务器上的图像处理画布.您将在Node.js here上找到有关如何使用fabric.js的更多信息.
这是一个使用Node.js的简单服务器并表示：
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('/',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来重新创建画布,并使用乘数来缩放数据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);
}
});