使画布拉伸以适合图像

Question

I have a canvas in which I want to render various images, depending on the user. Right now the canvas is fixed size like this:

<canvas width="400" height="300" id={'canvas'}/>

This is how I'm rendering the image:

componentWillReceiveProps(nextProps) {
    const ctx = document.getElementById('canvas').getContext('2d');
    const img = new Image();

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
    img.src = URL.createObjectURL(nextProps.image)
}

But this is what's happening:

So the image at the bottom is too big to be in the canvas, and the other image is too small to fill the image. Also if the image is anything other then a 400x300, it gets cut. How can I prevent it?

Answer 1

通过提供画布的宽度和高度以及ctx.drawImage来尝试：

ctx.drawImage(img, 0, 0, 400, 300);

Answer 2

In order to get dynamically your canvas dimensions you could have the following componentWillReceiveProps() method:

componentWillReceiveProps(nextProps) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = function () {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = URL.createObjectURL(nextProps.image)
}