使用webos将html5 canvas元素保存到文件

这里的imgvariables是从这里使用Open Source Png Generation代码中提取的。
http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/这是一个替代canvas.toDataURL（）; webOS不支持toDataURL，所以我不得不使用这个库。

在这里我已经使用这个库，并操纵我的canvas图像数据像素数组

EditorAssistant.prototype.getDataURL = function(width,height,data){ var p = new PNGlib(height, width, 256); // construcor takes height, weight and color-depth var background = p.color(0, 0, 0, 0); // set the background transparent for (var i = 0, n = data.length; i < n; i += 4) { var x = i * 10; var y = Math.sin(i) * Math.sin(i) * 50 + 50; // use a color triad of Microsofts million dollar color p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(data[i], data[i+1], data[i+2]); } return 'data:image/png;base64,'+p.getBase64() ; } 

老实说，我是node.js的新手。 我只是有一个命中和试用APProach …我想保存我操纵的canvas对象在我的应用程序中的图像目录..path确实存在这里，这段代码不会产生任何错误..评价它给我回拨成功也返回写入的字节数，但我无法find一个名为icon.png图像文件夹中的图像…上面生成的imgdata是作为数据传递给此代码..

  var fs = IMPORTS.require('fs'); var path = IMPORTS.require('path'); var buff = new Buffer(data,'binary').toString('base64'); path.exists('images/', function(exists ){ if (exists) { fs.open('images/icon.png', 'w', 666, function( e, id ) { fs.write( id, buff, null, 'binary', function(err,written){ if(err) callback({ error: false, reply: err }); if(written){ callback({ error: false, reply: buff.toString() }); } fs.close(id, function(){ callback({ error: false, reply: 'closed' }); }); }); }); } else { callback({ error: true, reply: 'File did not exist.' }); } } }) 

提前致谢

Answer 1

data是一个以data:image/png;base64,开始的string，其余的是base64中的数据。

1. 从data:image/png;base64,删除data:image/png;base64,
2. 将其从base64转换为二进制
3. 将该二进制缓冲区保存到文件

码

 var buff = new Buffer(data.substr('data:image/png;base64,'.length), 'base64'); ... fs.write(id, buff, 0, buff.length, 0, function(...