canvas.toDataURL() für die große Leinwand

Ich bin mir nicht sicher, ob es die Beschränkung auf Leinwand Maße, sondern es werden auch data-urls haben Einschränkungen je nach browser: Data-URL-Größenbeschränkungen.

Was Sie könnten versuchen, ist mit Node.js + node-canvas (server-Seite) neu zu erstellen die Leinwand. Ich habe mit diesen für die Erstellung von druckbaren Bildern aus canvas-Elemente, und habe keine Probleme/Einschränkungen mit toDataURL so weit.

Sind Sie mit der fabric.js Bibliothek? Ich bemerkte Sie auf dem Laufenden über Ihre forum.
Fabric.js kann verwendet werden in Node.js und hat eine toDataURLWithMultiplier Methode, die Skalen der Leinwand/Rahmen um die dataurl Bildgröße. Sie können die Methode Quelle, um zu sehen, wie das gemacht wird.

Edit:

Da Sie mit fabric.js ich würde vorschlagen, mit Node.js zu handle der canvas zu image processing auf dem server. Mehr Infos finden Sie auf wie zu verwenden fabric.js auf Node.js hier.

Hier ist ein einfacher server mit Node.js und 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);

Wenn der server läuft, können Sie Daten an ihn zu senden (postData).
Der server erwartet json, width und height neu auf die Leinwand und ein multiplier skalieren", um die data-url-image. Der client-seitige code würde wie folgt Aussehen:

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

Konnte man immer nur brechen das Bild in kleinere Abschnitte und speichern Sie diese einzeln, die ist wahrscheinlich nicht eine schlechte Idee auf jeden Fall. Im Grunde hätten Sie eine Funktion, die so etwas wie

var largeCanvas = document.getElementById('yourGiantCanvas').getContext('2d'),
    slice = document.createElement('canvas').getContext('2d');

slice.canvas.width = 1000;
slice.canvas.height = 1000;

for (var y=0; y < canvas.height; y+=1000){
  for (var x=0; x < canvas.width; x+=1000){
    slice.clearRect(0, 0, slice.canvas.width, slice.canvas.height);
    slice.drawImage(largeCanvas.canvas, x, y, 1000, 1000, 0, 0, 1000, 1000);

    var imagePiece = slice.canvas.toDataURL();

    //Now just save the imagePiece however you normally were planning to
    //and you can build the image again using these slices. You can create 
    //a much better user experience this way too. 
  }
}