webos를 사용하여 html5 캔버스 요소를 파일로 저장

여기서 img 변수는 오픈 소스 PNG 생성 코드를 사용하여 추출합니다.
http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ canvas.toDataURL()의 대안입니다. webOS는 toDataURL을 지원하지 않으므로이 lib를 사용해야했습니다. 여기webos를 사용하여 html5 캔버스 요소를 파일로 저장

내가이 라이브러리를 사용하고 내 캔버스 이미지 데이터의 픽셀 배열에 조작 한

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를 가지고있다 ... 내 응용 프로그램의 이미지 디렉토리에 내 조작 된 캔버스 객체를 저장하고 싶다. 경로는 여기에 존재하며이 코드는 어떤 오류도 생성하지 않는다. 콜백과도 사전

에 ..

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

덕분에 기록 된 바이트 수를 반환하지만 난 위의 생성 imgdata 데이터로이 코드에 전달됩니다 ... 이미지 폴더에 icon.png라는 이미지를 찾을 수 없습니다

출처

2011-05-03 sw-dev

나는 파일을 작성하는 시도하지했습니다 전에 webOS를 사용하고 있지만, 어디서 시도하고 있는지 기록 할 권한이 있습니까? 오류가 발생하지 않을 수도 있지만 webOS가 자동으로 실패 할 수도 있습니다. –

이제 괜찮습니다./media/internal/wallpapers /로 경로를 변경했습니다. ... PNG를 만들지 만 비어 있습니다. 이제 질문은 ... 이미지 파일에 캔버스 데이터를로드하는 방법입니다. 웹 OS인가? –

은 올바른 인코딩과 관련이 있습니까? png 이미지 shud가 어떻게 인코딩 될까요? –

data은 data:image/png;base64,으로 시작하고 나머지는 base64의 데이터입니다.

진 버퍼가 파일에 바이너리
저장에 64 기수에서 변환 data
에서 data:image/png;base64,를 제거

코드

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

출처

2011-05-04 20:00:14 mak

thnks mak ... 이제 atleast 이미지를 저장할 수 있습니다. –

위의 코드는 에뮬레이터에서 제대로 작동하지만 팜 장치에서는 작동하지 않습니다. –

webos를 사용하여 html5 캔버스 요소를 파일로 저장

답변

관련 문제