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

发布于 2024-11-04 17:37:20 字数 2136 浏览 3 评论 0原文

这里的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

染火枫林 2024-11-11 17:37:20

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(...

data is a string which starts with data:image/png;base64, and the rest is the data in base64.

  1. Remove data:image/png;base64, from data
  2. Convert it from base64 to binary
  3. Save that binary buffer to file

Code

var buff = new Buffer(data.substr('data:image/png;base64,'.length), 'base64');
...
fs.write(id, buff, 0, buff.length, 0, function(...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文