首页 文章

如何在HTML5 Canvas上缩放图像时保持纵横比?

提问于
浏览
4

在我的项目中,我正在使用HTML5 Canvas和FabricJS . 我有方案来维护我放在画布中的图像对象的宽高比 . 在调整角落或缩放图像时,我必须更新宽度或高度以保持图像的纵横比 .
problem image

上面的图片将清楚地显示我的问题 . 我需要一个算法或公式来维护图像的方面 .

图像应满足以下条件,

  • 如果我通过从实际尺寸调整图像的宽度或高度来收缩,它将裁剪并以相同的宽高比显示图像 .

  • 如果我通过从实际尺寸调整图像的宽度或高度来扩展,它将分别扩展图像高度或宽度,并为视口高度和宽度裁剪以保持纵横比 .

  • 隐藏的部分被平移和查看 .

请给我一些解决方案,谢谢 .

2 回答

  • 14

    要确保按比例完成调整大小,您只需将以下属性添加到图像对象:

    lockUniScaling: true
    

    我通常希望图像从中心缩放,因此也设置它:

    centeredScaling: true
    

    然而,要“裁剪”图像;这需要更多的努力,因为这不是Fabric JS提供的默认功能 . 我已经做了相当多的工作,并且尚未提出适用于文本,图像,矩形,多边形,圆形,旋转角度等的防弹解决方案 .

    这背后的基础是创建两个元素 - 一个是您的图像,第二个是剪切蒙版(通常是一个形状,如矩形,多边形等),然后将其作为clipTo属性应用于图像元素 . 此解决方案包含在:Multiple clipping areas on Fabric.js canvas

    参考文献 - Fabric JS Documentation

  • -4

    当您使用HTML5时,您可以将CSS3转换应用于画布:

    canvas {
        -ff-transform: scale(2); 
        -ms-transform: scale(2); 
        -webkit-transform: scale(2); 
    }
    

    使用带有缩放方法的CSS3转换属性应该调整画布的大小,并保持纵横比 . 这也是

    但是,您可能需要解决由视网膜/高dpr显示引起的单独缩放问题 .

    有关CSS3转换属性的更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/CSS/transform

相关问题