canvas.toDataURL()创建一个png,但我希望png具有一定的维度

时间:2016-08-22 21:48:36

标签: html5 express canvas png

基本上我创建的png总是尺寸为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+++++")
            })
        });

    }

1 个答案:

答案 0 :(得分: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();