使用Javascript调整图像大小

时间:2012-05-23 19:12:08

标签: javascript

我正在使用此webcam plugin,在捕获图像后(默认为320x240)我想将图像重新调整为100x100(用于剖面图捕获)。
我尝试使用缩放,但它正在裁剪图像而不是调整图像大小。

2 个答案:

答案 0 :(得分:0)

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

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

这是你想要的吗?你也可以用java脚本

答案 1 :(得分:0)

以下是调整图片大小的代码。

这里,'this'代表图像。 var maxWidth = 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
    }