使用webos将html5 canvas元素保存到文件 [英] save html5 canvas element to file using webos

问题描述

这里img变量是从这里使用开源Png生成代码中提取的。

http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ 这是一个canvas.toDataURL（）的替代品; webOS不支持toDataURL所以我不得不使用这个库。

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() ;
}

老实说我是node.js的新手。我只是有一个命中和试用APProach ...
i想要将我操纵的画布对象保存到我的应用程序中的图像目录..
路径确实存在这里，这段代码不会产生任何错误.. rater它给我回调成功并且还返回写入的字节数但我无法在images文件夹中找到名为icon.png的图像...上面生成的
imgdata作为数据传递给此代码..

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

提前感谢

推荐答案

data 是一个以数据开头的字符串： image / png; base64，，其余是base64中的数据。

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

1. 删除 data：image / png; base64，来自数据


2. 将其从base64转换为二进制


3. 将二进制缓冲区保存到文件

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

代码

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

这篇关于使用webos将html5 canvas元素保存到文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！