使用 webos 将 html5 canvas 元素保存到文件
这里的 img 变量是从使用开源 Png 生成代码中提取的..
http://www.xarg.org/ 2010/03/generate-client-side-png-files-using-javascript/ 这是 canvas.toDataURL() 的替代方法; webOS 不支持 toDataURL 所以我必须使用这个库。
在这里,我使用了这个库并在我的画布图像数据像素数组上进行了操作,
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 的新手。我只是有一个尝试和尝试的方法...... 我想将我操作的画布对象保存到我的应用程序中的图像目录中。 该路径确实存在于此处,并且此代码不会生成任何错误..它给我回调成功的机会,并且还返回写入的字节数,但我在图像文件夹中找不到名为 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.'
});
}
}
})
提前致谢
here img variable is extracted from using Open Source Png Generation code here ..
http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ that is an alternative to canvas.toDataURL(); webOS does not support toDataURL so i had to use this lib.
here i have used this library and manipulated on my canvas image data pixel array
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() ;
}
honestly speaking i am newbie to node.js. i am just having an hit and trial APProach...
i want to save my manipulated canvas object to image directory in my application..
the path does exists here and this code does not generate any error .. rater it give me success on callback and also return number of bytes written but i cant find an image named icon.png in the images folder...
imgdata generated above is passed to this code as data..
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.'
});
}
}
})
thanks in advance
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
data
是以data:image/png;base64,
开头的字符串,其余部分是base64 的数据。data
中删除data:image/png;base64,
代码
data
is a string which starts withdata:image/png;base64,
and the rest is the data in base64.data:image/png;base64,
fromdata
Code