目前流行的“你画我猜”应用,你有没有想过使用HTML5来实现过?那么不可避免的需要解决canvas保存图片到硬盘或mongodb之类的数据库。本文主要介绍使用nodejs将html5 canvas base64编码图片保存为文件,同时提供两种解决方案。
html5 canvas属于客户端API,没有权限去保存图片到硬盘,只有canvas . toDataURL()这一个接口可导出画布的base64编码,以提供给服务端进行处理保存,据我所知.net和php都有方法或类来进行简单的处理保存。nodejs呢?是的,没错!nodejs同样有能力来保存base64编码的图片。
解决方案一:
使用new Buffer来创建对应编码的缓冲,通过fs模块将Buffer写成一个文件。
优点:简单易用,无需其它模块的支持。
缺点:不能对图片的尺寸,水印,压缩,格式等进行处理。
注意点:
1、new Buffer接收到base64编码,不能带data:URL,而使用canvas . toDataURL()导出的base64编码会带data:URL,所以需要先过滤掉
类似这样的一段“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0”
需过滤成:“iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0”
2、’binary’ – 一种只使用每个字符前8个字节将原始的二进制数据编码进字符串的方式。这个方式已经废弃,应当尽量使用buffer 对象。这个编码将会在未来的node 中删除。
看到有人把base64声明的Buffer再转换成binary,这个是完全没必要的。
3、生成的图片有size变化,但是打开后是一个无效的图像,这个看本文的第三点。
使用express搭建的/upload (POST)上传保存接口,完成代码如下:
var express =require('express');var fs =require("fs");var app =module.exports = express();//配置
app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('keyboard cat'));
app.use(express.session());
app.use(app.router);
app.use(express.static(__dirname +'/up'));//静态文件目录
app.use(express.errorHandler({ dumpExceptions:true, showStack:true}));});//保存base64图片POST方法
app.post('/upload',function(req, res){//接收前台POST过来的base64var imgData = req.body.imgData;//过滤data:URLvar base64Data = imgData.replace(/^data:image\/\w+;base64,/,"");var dataBuffer =newBuffer(base64Data,'base64');
fs.writeFile("out.png", dataBuffer,function(err){if(err){
res.send(err);}else{
res.send("保存成功!");}});});if(!module.parent){
app.listen(8000);
console.log('Express started on port 8000');}
解决方案二:
使用node-canvas模块进行图片处理和保存。
(node-canvas安装见我的另一篇博文:http://www.2fz1.com/?p=246)
优点:能对图片像html5 canvas一样进行处理,尺寸调整、水印、图片反转色、格式转换
缺点:需安装模块支持、当base64编码有误不能解析成图片时会报错并停止nodejs服务。
注意点:canvas透明背景,默认为黑色;使用base64给img.src赋值时,需带上data:URL
使用express搭建的/upload (POST)上传保存接口,完成代码如下:
varCanvas=require('canvas');//需安装canvas模块var express =require('express');var fs =require("fs");var app =module.exports = express();//配置
app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('keyboard cat'));
app.use(express.session());
app.use(app.router);
app.use(express.static(__dirname +'/up'));//静态文件目录
app.use(express.errorHandler({ dumpExceptions:true, showStack:true}));});
app.post('/upload',function(req, res){var base64Data = req.body.imgData;var img =newCanvas.Image;
img.onload =function(){var w = img.width;var h = img.height;var canvas =newCanvas(w, h);var ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);varout= fs.createWriteStream(__dirname +'/crop.jpg');var stream = canvas.createJPEGStream({
bufsize :2048,
quality :80});
stream.on('data',function(chunk){out.write(chunk);});
stream.on('end',function(){out.end();
res.send("上传成功!");});}
img.onerror =function(err){
res.send(err);}
img.src = base64Data;});if(!module.parent){
app.listen(8000);
console.log('Express started on port 3000');}
容易出现的错误(base64编码中,不容忽视的“+”号)
1、如果canvas没有任何像素,则返回值为:“data:,”,这是最短的data:URL,代码中最好做一下保护。
2、使用解决方案一实现图片保存,生成的图片有size,但是打开后却是不能识别的无效图像。
使用解决方案二实现图片保存,nodejs直接报错,并且服务挂掉。
原因:
这个问题,花了我很长时间才找到原因,根本原因是base64编码,使用express接收POST值后,base64编码字符串中的“+”号被替换成空格了,引起编码出错,img.src = base64Data;直接把nodejs服务挂掉。如果你出现类似问题,请console.log(base64Data);看字符串是否有空格。
解决办法:
将空格替换回“+”号
var base64Data = imgData.replace(/\s/g,"+");
相关推荐
在Node.js中,将接收到的Base64格式的图片数据保存为文件并存储到服务器上是一项常见的操作,尤其在处理前端上传的图像时。Base64是一种编码方式,它将二进制数据转换为可打印的ASCII字符,以便在网络传输中使用。...
在这个"nodejs的base64和aes-128-ecb加密.rar"压缩包中,包含的`EncryptTool.js`和`EncryptTool.ts`文件很可能是两个实现Base64编码和AES-128-ECB加密的工具类。接下来,我们将深入探讨这两个知识点。 首先,Base64...
标题中的“win7 64 nodejs canvas module”指的是在Windows 7 64位操作系统上使用的Node.js环境下的Canvas模块。Node.js是一款基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行...
验证码以base64格式创建验证码安装npm install nodejs-captcha 用法// import libraryvar captcha = require ( "nodejs-captcha" ) ;// Create new Captchavar newCaptcha = captcha ( ) ;// Value of the ...
base64-stream, 包含用于编码/解码Base64数据的新 node v0.10样式流类 简介虽然 node.js 支持Base64数据,但它不具备在流中编码/解码数据的能力。这里库包含一个流Base64编码器和一个用于 node.js的流Base64解码器。...
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...
要将Canvas的内容转化为H264编码,需要利用FFmpeg库,这是一个强大的多媒体处理框架,包含有avcodec、avformat、avfilter、avutil、swscale、swresample等组件,这些在提供的压缩包文件中都有涉及。例如,`avcodec-...
Base64是一种用于将二进制数据转换为ASCII字符串的编码方式,它允许我们将非文本数据如图片、音频等安全地在纯文本环境中传输。在Node.js中,我们可以使用内置的`Buffer`对象及其方法来实现Base64的编码和解码。 1....
描述 "用nodejs实现一个html5的demo源码" 提示我们将探讨如何使用Node.js创建一个服务端脚本,该脚本能够提供HTML5页面。HTML5是最新版本的超文本标记语言,提供了许多增强功能和新元素,使得网页开发更加便捷高效。...
6. **保存和导出**:绘制完成后,可以将结果保存为 PNG、JPEG 或 PDF 文件。 在 Node.js 开发中,NodeCanvas 主要应用于以下几个场景: 1. **图片处理**:生成自定义的图像,如图表、二维码、水印等。 2. **PDF 和...
Node.js实现base64与png文件互相转换是网络应用开发中一个常见的需求,特别是在前后端分离的架构下,后端将图片文件转换为base64编码字符串传递给前端,可以简化前端的处理过程。同样,前端在某些情况下也需将base64...
base62.js, node.js的javascript Base62编码/解码器 Base62.js JavaScript Base62编码/解码器什么是Base...Base62编码将数字转换为ASCII字符串( 0 -9,一个z 和一个z ),反之亦然,这通常会导致比较短的字符串。 这样的
nodeJs 12.22.12-x64-windows版本 nodeJs 12.22.12-x64-windows版本 nodeJs 12.22.12-x64-windows版本 nodeJs 12.22.12-x64-windows版本 nodeJs 12.22.12-x64-windows版本
PureImage 是用于NodeJS的HTML Canvas 2d绘图API的纯JavaScript实现
标题中的 "nodejs4.0 x86 x64" 指的是这个压缩包包含了针对两种不同处理器架构的 Node.js 安装包:x86(32位)和 x64(64位)。Windows 32位系统使用 x86 版本,而 Windows 64位系统可以兼容并使用 x64 版本。在选择...
标题中的“Node.js-这是一个nodejs库可以把一个多页的pdf转成多页png图片”表明了这个项目是一个基于Node.js的库,其主要功能是将PDF文档转换为多个PNG图像,每一页PDF对应一张PNG图片。这样的工具在需要对PDF进行...
为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送。这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能...
Nodejs导出Excel带图片,Nodejs后台导出带图片Excel 本资源内有说明及使用安装等详细步骤,以及引入插件 由于nodejs导出Excel带图片的资源比较少,我也是找了许久才知道怎么写的,这里发布个收费的,望各位见谅!