Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.5k views
in Technique[技术] by (71.8m points)

想用canvas实现固定大小108*108,图片等比例缩小并居中,能用图片的色素值自动填充剩余的背景

从字节系统里看到的效果,不管上传的图片是什么尺寸都会等比例转为108*108,并且按照图片的色素值自动填充剩余的背景,找了些参考资料但总有问题无法实现。。。
上传2个效果图

原始图9:16
image
image.png
原始图16:9
image
image.png

https://blog.csdn.net/weixin_...
https://blog.csdn.net/wanshao...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这个效果多种实现方式,一种比较复杂的是吸色,通过算法获取主题色,然后设置成背景。难点在于吸色算法。
另一种是直接将图像铺满背景,然后加一层高斯模糊,类似于这种效果

image.png

在线demo:https://lab.johnsonlee.site/?path=/story/web实验室-图片显示--effect-1


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...