2016-08-22 1 views
0

基本的には、作成するpngは常にw 300 h 150の寸法を持ちます。ここで私がやろうとしたことがあります。サーバ内のcanvas.toDataURL()はpngを作成しますが、そのpngに特定の寸法を設定します。

// this was my last trial I tried canging the width in the canvas tag 
var newCanvas = $("<canvas/>", {"class" : "pic", "width" : "1000px", "height" :"300px"}).width(1000).height(500) 
// $(".mainContent").prepend(newCanvas); 
// var canvasData = dataGatherer(); 
var canvas = newCanvas[0]; 
console.log(canvas) 
var ctx = canvas.getContext("2d"); 
ctx.font = "30px Arial" 
console.log("datum---TEST--", datum) 
ctx.fillText(datum.reviewText, 10, 50) 
console.log(canvas.toDataURL()) 
datum.img = canvas.toDataURL(); 

どこか:

if(req.body.img){ 
     var img = req.body.img; 
     data = img.replace(/^data:image\/\w+;base64,/, ""); 
     var buf = new Buffer(data, "base64"); 
     fs.unlink(__dirname + "/../public/another.png", function(){ 
      fs.writeFile(__dirname + "/../public/another.png", buf, {flag : "w"},function(){ 
       console.log("++++writen to file+++++") 
      }) 
     }); 

    } 

答えて

0

あなたは結果.toDataURLのサイズを変更したい場合は、キャンバス要素のサイズを変更する必要があります。

var canvas= document.createElement('canvas'); 

// resize the canvas element -- not it's CSS size 
canvas.width=1000; 
canvas.height=300; 

... 

// this dataURL will be 1000 x 300 
var dataURL = canvas.toDataURL(); 
+0

私はちょうどanwerを見つけました...それは 'VAR newCanvas = $( "<キャンバスクラス= 'PIC'> ").ATTR(" 高さ"、400).ATTR(「幅を働くようにこれが見えます"、1000)' –

+0

@jackblank ...チャックル!それは私がちょうど答えたものです! :-)) – markE

関連する問題