canvas.toDataURL() 创建一个 png 但我希望该 png 具有一定的尺寸

Question

基本上，我创建的 png 始终具有 300 h 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();