javascript - 使用 Javascript 调整图像大小

Question

我正在使用这个网络摄像头插件，在捕获图像（默认为 320x240）后，我想将图像大小调整为 100x100（用于个人资料图片捕获）。
我尝试使用缩放，但它正在裁剪图像而不是调整图像大小。

Answer 1

您可以使用 img 标签本身来调整图像的大小

<img src='./imagename.jpg' style="display: inline; width: 100px; height: 100px">

这是你想要的吗？你也可以做java脚本

Answer 2

这是调整图像大小的代码。

在这里，'this' 代表图像。变量最大宽度 = 320；// 图像的最大宽度 var maxHeight = 240; // 图像的最大高度 var ratio = 0; // 用于纵横比 var width = $(this).width(); // 当前图像宽度 var height = $(this).height(); // 当前图像高度

    // Check if the current width is larger than the max
    if(width > maxWidth){
        ratio = maxWidth / width;   // get ratio for scaling image
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", height * ratio);  // Scale height based on ratio
        height = height * ratio;    // Reset height to match scaled image
        width = width * ratio;    // Reset width to match scaled image
    }

    // Check if current height is larger than max
    if(height > maxHeight){
        ratio = maxHeight / height; // get ratio for scaling image
        $(this).css("height", maxHeight);   // Set new height
        $(this).css("width", width * ratio);    // Scale width based on ratio
        width = width * ratio;    // Reset width to match scaled image
    }