javascript - Canvas toDataURL() method is saving low resolution image - Stack Overflow

admin管理员组

文章数量:1023857

I have made a polygonal background generator using HTML5 canvas over at:

This is the relevant code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

When an user clicks the canvas, and subsequently "Prepare Image", the image that is saved on right click is of low resolution(300px x 150px), instead of the canvas resolution. How do I allow the user to save a higher resolution image?

I have made a polygonal background generator using HTML5 canvas over at:

http://codepen.io/rfalor/pen/LhinJ

This is the relevant code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

When an user clicks the canvas, and subsequently "Prepare Image", the image that is saved on right click is of low resolution(300px x 150px), instead of the canvas resolution. How do I allow the user to save a higher resolution image?

• javascript
• jquery
• canvas
• html5-canvas

Share Improve this question Follow edited Jul 22, 2014 at 15:09 Loktar 35.3k77 gold badges9696 silver badges106106 bronze badges asked Jul 22, 2014 at 9:21 Rohit FalorRohit Falor 1,28422 gold badges1111 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is you're sizing the canvas using css rather than the width and height properties of the canvas element. When you do that you're only stretching the canvas not increasing the coordinate space of the element.

I added the following to your code

canvas.width = 700;
canvas.height = 396;

Then I had to change your randomize function a bit to accept a number since it wont always be 500;

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

And you can now call your lineTo's like this

ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));

However I realize you probably want it to be more than the width and height so you don't see the edges of the shapes but I figure you can fix that up.

Live Demo

Fully modified code below.

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

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

function sides() {
    var a = Math.floor(Math.random() * 10);
    return a;
}

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0,
        alpha = 0.1; //Math.random().toFixed(1);
    var final = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    return final;
}

$('*').click(function () {
    clearInterval(timer);
    $('button').show();
});

$('button').click(function () {
    $(this).css('left', '-400px');
    $('h3').text("Right click and save a beautiful background!");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var dataURL = canvas.toDataURL();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('canvasImg').src = dataURL;
    $('#canvasImg').css('border', '5px solid black');
    $('#canvas').hide();
    $('#canvasImg').show();
});

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var left = true;

    canvas.width = 700;
    canvas.height = 396;

    var timer = setInterval(function () {
        for (var i = 1; i <= 1000; i++) {
            ctx.beginPath();
            if (left) {
                ctx.moveTo(0, randomize(canvas.height));
                left = false;
            } else {
                ctx.moveTo(randomize(canvas.width), 0);
                left = true;
            }
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.fillStyle = getRndColor();
            ctx.fill();
        }
    }, 1000);
}

I have made a polygonal background generator using HTML5 canvas over at:

This is the relevant code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

When an user clicks the canvas, and subsequently "Prepare Image", the image that is saved on right click is of low resolution(300px x 150px), instead of the canvas resolution. How do I allow the user to save a higher resolution image?

I have made a polygonal background generator using HTML5 canvas over at:

http://codepen.io/rfalor/pen/LhinJ

This is the relevant code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

When an user clicks the canvas, and subsequently "Prepare Image", the image that is saved on right click is of low resolution(300px x 150px), instead of the canvas resolution. How do I allow the user to save a higher resolution image?

• javascript
• jquery
• canvas
• html5-canvas

Share Improve this question Follow edited Jul 22, 2014 at 15:09 Loktar 35.3k77 gold badges9696 silver badges106106 bronze badges asked Jul 22, 2014 at 9:21 Rohit FalorRohit Falor 1,28422 gold badges1111 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is you're sizing the canvas using css rather than the width and height properties of the canvas element. When you do that you're only stretching the canvas not increasing the coordinate space of the element.

I added the following to your code

canvas.width = 700;
canvas.height = 396;

Then I had to change your randomize function a bit to accept a number since it wont always be 500;

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

And you can now call your lineTo's like this

ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));

However I realize you probably want it to be more than the width and height so you don't see the edges of the shapes but I figure you can fix that up.

Live Demo

Fully modified code below.

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

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

function sides() {
    var a = Math.floor(Math.random() * 10);
    return a;
}

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0,
        alpha = 0.1; //Math.random().toFixed(1);
    var final = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    return final;
}

$('*').click(function () {
    clearInterval(timer);
    $('button').show();
});

$('button').click(function () {
    $(this).css('left', '-400px');
    $('h3').text("Right click and save a beautiful background!");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var dataURL = canvas.toDataURL();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('canvasImg').src = dataURL;
    $('#canvasImg').css('border', '5px solid black');
    $('#canvas').hide();
    $('#canvasImg').show();
});

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var left = true;

    canvas.width = 700;
    canvas.height = 396;

    var timer = setInterval(function () {
        for (var i = 1; i <= 1000; i++) {
            ctx.beginPath();
            if (left) {
                ctx.moveTo(0, randomize(canvas.height));
                left = false;
            } else {
                ctx.moveTo(randomize(canvas.width), 0);
                left = true;
            }
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.fillStyle = getRndColor();
            ctx.fill();
        }
    }, 1000);
}

本文标签： javascriptCanvas toDataURL() method is saving low resolution imageStack Overflow