canvas.toDataURL（）創建一個PNG，但我想要PNG有一定的尺寸

Question

基本上，我創建的PNG總是有尺寸W 300小時150，我想要更大的尺寸。這是我想要做的。

// 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+++++") 
      }) 
     }); 

    } 

Answer 1

如果你想要得到的.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();