如何将画布数据保存到文件 [英] how to save canvas data to file

问题描述

我使用node.js将画布保存为图像
img通过在我的画布元素上使用toDataURL来提取writeFile。
它不能保存文件
这里是我的代码

$ $ p $ $ $ $ $ $ $ $ $' ）;
var path = IMPORTS.require（'path'）;
path.exists（'images /'，function（exists）{
if（exists）{

fs.writeFile（'images / icon.png'，img，function （err）{
if（err）
callback（{
error：false，
reply：err
}）;
console.log（' ）;
callback（{
error：false，
reply：'success。'
}）;
}）;
}
else {
callback（{
error：true，
reply：'File did not exist。'
}）;
}
}）;

解决方案

以下是将画布数据保存到Nodejs中的文件。变量 img 是由 canvas.toDataURL（）生成的字符串。我假定您已经知道如何将该字符串从浏览器发布到您的Nodejs服务器。

生成我使用的示例图像的HTML代码片段：

 < canvas id =foowidth =20pxheight =20px>< / canvas> 
< script> 
 var ctx = $（'＃foo'）[0] .getContext（'2d'）; （var y = 0; y <20; y + = 10）{
 if（（var x = 0; x <20; x + = 10） x == y）{ctx.fillStyle ='＃000000'; } 
 else {ctx.fillStyle ='＃8888aa'; } 
 ctx.fillRect（x，y，10，10）; 
} 
} 
 console.log（$（'＃foo'）[0] .toDataURL（））; 
< / script> 
  

Nodejs片段解码base64数据并保存图片：

  fs = require（'fs'）; 
 sys = require（'sys'）; 
 //由canvas.toDataURL（）生成的字符串
 var img =data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0
 +NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO
 +3gAAAABJRU5ErkJggg == ; 
 //剥离数据：url前缀以获得base64编码的字节
 var data = img.replace（/ ^ data：image\ / \w +; base64，/， ）; 
 var buf = new Buffer（data，'base64'）; 
 fs.writeFile（'image.png'，buf）; 
  

输出：

i am using node.js to save canvas to image img in writeFile is extractedby using toDataURL on my canvas element. it doenot save file here is my code

var fs = IMPORTS.require('fs');
var path = IMPORTS.require('path');
path.exists('images/', function(exists){
    if (exists) {

        fs.writeFile('images/icon.png', img, function(err){
            if (err) 
                callback({
                    error: false,
                    reply: err
                });
            console.log('Resized and saved in');
            callback({
                error: false,
                reply: 'success.'
            });
        });
    }
    else {
        callback({
            error: true,
            reply: 'File did not exist.'
        });
    }
 });    

解决方案

Here is a literal example of how to save canvas data to a file in Nodejs. The variable img is a string generated by canvas.toDataURL(). I've assumed you already know how to POST that string from the browser to your Nodejs server.

HTML snippet that generates the sample image I used:

<canvas id="foo" width="20px" height="20px"></canvas>
<script>
var ctx = $('#foo')[0].getContext('2d');
for (var x = 0; x < 20; x += 10) {
    for (var y = 0; y < 20; y += 10) {
        if (x == y) { ctx.fillStyle = '#000000'; }
        else { ctx.fillStyle = '#8888aa'; }
        ctx.fillRect(x, y, 10, 10);
    }
}
console.log($('#foo')[0].toDataURL());
</script>

Nodejs snippet to decode the base64 data and save the image:

fs = require('fs');
sys = require('sys');
// string generated by canvas.toDataURL()
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"
    + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"
    + "3gAAAABJRU5ErkJggg==";
// strip off the data: url prefix to get just the base64-encoded bytes
var data = img.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
fs.writeFile('image.png', buf);

Output:

这篇关于如何将画布数据保存到文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！