问题描述
对于大画布,.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() 用于大画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!