使画布拉伸以适合图像

Question

我有一个画布，我想在其中渲染各种图像，具体取决于用户。现在，画布是固定大小的，如下所示：

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

这就是我渲染图像的方式：

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)
}

但这是正在发生的事情

因此，底部的图像太大，无法放入画布中，而另一个图像太小而无法填充该图像。另外，如果图片不是400x300的图片，则会被剪切。我该如何预防？

Answer 1

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

package com.jesperancinha.files;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

public class FileFinder {
    public static void main(String[] args) throws IOException {
        String glob = "glob:**.{java}";
        String location = "/Users/joao/dev/src/jesperancinha";
        Path found = match(location, glob);
        System.out.println("Found: " + found);
    }

    public static Path match(String location, String glob) throws IOException {
        GlobFileVisitor globFileVisitor = new GlobFileVisitor(glob);
        Files.walkFileTree(Paths.get(location), globFileVisitor);
        return globFileVisitor.getFoundPath();
    }
}

Answer 2

为了动态获取画布尺寸，您可以使用以下componentWillReceiveProps()方法：

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)
}