如何将画布的最大宽度设置为屏幕的大小，同时保持宽高比？

Question

我正在使用画布加载base64图像。目前我有它，所以它将只是加载的图像的完整大小。我想让画布保持图像的纵横比，但只是我正在使用的iphone屏幕的最大宽度。现在，当它加载时，它会从屏幕上消失。

下面是我的画布代码：

// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;

// Load image on canvas
const nativeCanvas: HTMLCanvasElement = this.cameraCanvas
    .nativeElement;
const ctx = nativeCanvas.getContext("2d");

var image = new Image();
image.onload = function() {
    nativeCanvas.height = image.height;
    nativeCanvas.width = image.width;
    ctx.drawImage(image, 0, 0);
};
image.src = this.base64Image;
console.log("Image: ", image);

我在ionic-cordova应用程序上使用它。

Answer 1

您需要设置最大宽度，例如：let maxW = 500。这可能是您的iPhone宽度。然后，您可以计算图像的新高度。我希望这就是你要问的。

​

image.onload = function() {
    nativeCanvas.width = maxW;
    nativeCanvas.height = (img.height * maxW)/img.width;
    ctx.drawImage(image, 0, 0, nativeCanvas.width, nativeCanvas.height);
};

​

你也可以使用像if(img.width > maxW)这样的条件重新计算画布高度，否则保持画布大小=图像大小。