html5-canvas 图片缩放图像以适合或填充

ゝ一纸荒年。 2023-10-02 11:08 27阅读 0赞

**缩放以适应**

意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。

**缩放以填充**

意味着缩放图像，以便图像覆盖所有画布像素。如果图像方面与画布不同，则图像的某些部分将被剪裁。该示例显示了缩放以填充的图像。请注意图像的顶部和底部是如何不再可见的。

示例缩放以适合

var image = new Image();
    image.src = "imgURL";
    image.onload = function(){
        scaleToFit(this);
    }
    
    function scaleToFit(img){
        // get the scale
        var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
        // get the top left position of the image
        var x = (canvas.width / 2) - (img.width / 2) * scale;
        var y = (canvas.height / 2) - (img.height / 2) * scale;
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
    }

###  ###

示例 缩放填充

var image = new Image();
    image.src = "imgURL";
    image.onload = function(){
        scaleToFill(this);
    }
    
    function scaleToFill(img){
        // get the scale
        var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
        // get the top left position of the image
        var x = (canvas.width / 2) - (img.width / 2) * scale;
        var y = (canvas.height / 2) - (img.height / 2) * scale;
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
    }

这两个函数之间的唯一区别是获取比例。拟合使用最小拟合比例，填充使用最大拟合比例。

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 拖放图片

(1)将图片拖动到层中 ![Center][] (2)图片先拖动到第一个层 ![Center 1][] (3)在第一个层中拖动到第二个层中 ![Cente

电玩女神/ 2023年10月17日 11:35/ 0 赞/ 143 阅读

相关图片缩放

- (UIImage )scaleToSize:(UIImage )img size:(CGSize)size{ // 创建一个bitmap的conte

系统管理员/ 2023年10月16日 20:23/ 0 赞/ 31 阅读

相关 html5-canvas 图片缩放图像以适合或填充

缩放以适应意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。

ゝ一纸荒年。/ 2023年10月02日 11:08/ 0 赞/ 28 阅读

相关使用HTML5 canvas 标签进行图片裁剪、旋转、缩放

代码使用到的js插件：jquery、bootstrap、lrz。 jquery就不说了，基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页

r囧r小猫/ 2022年08月04日 04:21/ 0 赞/ 299 阅读

相关 canvas实现滚动条缩放图片的demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年06月14日 02:37/ 0 赞/ 213 阅读

相关 HTML5 Canvas 开发绘图方法整理【九、Canvas旋转、缩放】

rotate() 旋转当前绘图　　（旋转）语法： ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点而是以Canvas 画布 x

电玩女神/ 2022年05月31日 09:17/ 0 赞/ 427 阅读

相关 Canvas绘图--放缩

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

港控/mmm°/ 2022年05月28日 12:20/ 0 赞/ 304 阅读

相关 HTML图像热区随图片缩放自动调整

　　思路很简单，就是设置coords对应的坐标按比例缩放就可以了。注意，给出的代码只是页面初始显示时调整一次，再发生变化没有进行调整。 <img src=

灰太狼/ 2022年04月08日 09:29/ 0 赞/ 271 阅读

相关 html5 canvas 图像处理

1.图像放大缩小 <script> var cvs = document.getElementById("canvas");

左手的ㄟ右手/ 2021年12月22日 10:39/ 0 赞/ 393 阅读

相关 canvas系列--图像处理(三) 图像缩放

![20170301142939997][] 图像缩放一.首先分析原理 ![20170301143913221][] 如图所示：每一次都显示整个图像，只不过显示

àì夳堔傛蜴生んèń/ 2021年09月11日 08:24/ 0 赞/ 1042 阅读