【Web前端问题】js如何改变图片比例

昨天面试，面试官问了我一个问题，就是用户上传了一张不是一比一比例的图片，你如何把这张图片设置成一比一且不变形

回答：

只能让它显示不完全啊，设置一个父元素，宽高等比固定，新建image对象，在对象的onload事件里获取宽高，如果高大设置宽为父元素宽，反之设置高为父元素高，添加到父元素

回答：

1.获取图片宽高
2.已宽或高最大一个为基准
3.用canvas绘制
4.保存图片

回答：

！我觉得问的是 图片截取吧
例如微信上传头像，图片是长方形1:2的尺寸， 都会有个1:1的正方形，来截取图片
图片描述

这样就比较符合你的问题，设置‘1比1不变形’，设置的话 感觉只能是图片截取
至于图片截取简单点就是两个方法
1、前端处理-canvas绘图，进行截取
2、后端处理-对应坐标给到程序，程序来截图后，把新的图片资源反馈给你

祝早日解决问题！

回答：

  • background-size: cover;

  • 前端裁切

  • 后端图片裁切服务

  • 图像算法，调整比例且视觉不违和

回答：

要让不是1:1的图片保存为1:1 只有两种方法啊。要么图片截取 要么留白（比如200100的图片设置父元素为200200 然后图片居中上下留白，具体js就像1楼说的 高大设置宽为父元素宽，反之设置高为父元素高，添加到父元素）

回答：

object-fit： cover； 一个css3属性搞定

以上是 【Web前端问题】js如何改变图片比例 的全部内容， 来源链接： utcz.com/a/135330.html

回到顶部