【问题标题】:save html5 canvas element to file using webos使用 webos 将 html5 画布元素保存到文件
【发布时间】:2011-08-18 17:14:50
【问题描述】:

这里的 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.'
        });
    }
       }
   })

提前致谢

【问题讨论】:

  • 我之前没有尝试在 webOS 中写出文件,但你确定你有权限在你想写的地方写吗?你可能不会收到错误,但是当你尝试在不应该写的地方写东西时,webOS 可能会静默失败,我不知道。
  • 好的现在它正在工作我刚刚将路径更改为/media/internal/wallpapers/ ...它创建了一个png但它是空的..现在的问题是...如何加载我的画布数据到图像文件是 webOS?
  • 与正确的编码有关吗?如何对 png 图像进行编码?

标签: javascript html node.js webos


【解决方案1】:

data是以data:image/png;base64,开头的字符串,其余为base64格式的数据。

  1. 从data 中删除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(...

【讨论】:

  • thnks mak ...我现在至少可以保存图像
  • 上面的代码在模拟器中运行良好,但不适用于掌上设备
猜你喜欢
  • 2011-09-28
  • 1970-01-01
  • 1970-01-01
  • 2017-10-28
  • 2012-07-30
  • 2014-06-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多