canvas.toDataURL() 用于大画布 [英] canvas.toDataURL() for large canvas

问题描述

对于大画布，.toDataURL() 有问题.我想在 base64 中编码并解码 php 文件，但如果我有一个大画布，strDataURI 变量为空.

I have a problem with .toDataURL() for large canvas. I want to enconde in base64 and decode on php file but if I have a large canvas the strDataURI variable is empty.

我的代码:

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

有没有 .toDataURL() 的替代方法或改变大小限制的方法?

Is there any alternative to .toDataURL() or some way to change the size limit?

谢谢.

推荐答案

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

I'm not sure if there are limitation to canvas dimensions, but data urls have limitations depending on the browser: Data URL size limitations.

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

What you could try is using Node.js + node-canvas (server side) to recreate the canvas. I've been using these for creating printable images from canvas elements, and didn't have any problems/limitations using toDataURL so far.

您使用的是fabric.js 库吗?我注意到你也在他们的论坛上发帖.Fabric.js 可以在 Node.js 中使用并且有一个 toDataURLWithMultiplier 方法，它缩放画布/上下文，允许您更改 dataurl 图像大小.您可以查看方法源以了解这是如何完成的.

Are you using the fabric.js library? I noticed you posted on their forum as well. Fabric.js can be used in Node.js and has a toDataURLWithMultiplier method, which scales the canvas/context allowing you to change the dataurl image size. You can check the method source to see how this is done.

由于您使用的是 fabric.js，我建议使用 Node.js 来处理画布以在服务器上进行图像处理.您可以在 此处找到有关如何在 Node.js 上使用 fabric.js 的更多信息一>.

Since you're using fabric.js I would suggest using Node.js to handle the canvas to image processing on the server. You'll find more info on how to use fabric.js on Node.js here.

这是一个使用 Node.js 和 express 的简单服务器:

Here is a simple server using Node.js and 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 图像.客户端代码如下所示:

When the server is running you can send data to it (postData). The server expects json, width and height to recreate the canvas, and a multiplier to scale the data url image. The client side code would look something like this:

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

这篇关于canvas.toDataURL() 用于大画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！