canvas.toDataURL()用于大画布

Question

我.toDataURL()对大帆布有问题.我想base64在php文件中加入并解码,但如果我有一个大画布,那么strDataURI变量是空的.

我的代码:

var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.substr(22, strDataURI.length);
$.post("save.php",
{ 
   str: strDataURI
};

是否有任何替代.toDataURL()或某种方式来改变大小限制？

谢谢.

Answer 1

我不确定画布尺寸是否有限制,但数据网址有限制,具体取决于浏览器:数据URL大小限制.

您可以尝试使用Node.js + node-canvas(服务器端)来重新创建画布.我一直在使用它们来创建canvas元素的可打印图像,到目前为止使用toDataURL没有任何问题/限制.

你在使用fabric.js库吗？我注意到你也发布在他们的论坛上.Fabric.js可以在Node.js中使用,并且具有toDataURLWithMultiplier方法,该方法可以缩放画布/上下文,允许您更改dataurl图像大小.您可以检查方法源以了解如何完成此操作.

编辑:

由于您正在使用fabric.js,我建议使用Node.js来处理服务器上的画布到图像处理.你会在这里找到有关如何在Node.js上使用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('/', 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图像.客户端代码看起来像这样:

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);
    }
});