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

Question

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

原始图9:16


原始图16:9

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

Answer 1

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

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

Answer 2

类似这种吗
get-average-color-of-image-via-javascript

Answer 3

demo

Answer 4

可以参考楼上的css方案用canvas实现一版.

1. 让图片的短边对齐画布,长边居中,即让画面铺满画布,达到background-size: cover的效果,再将其模糊处理.
2. 再次绘制图片,让图片长边对其画布,短边居中,即background-size: contain.
3. 将处理后的图片上传服务器

Answer 5

昨天已实现，有时间放上DEMO，主要逻辑还是在drawImage的参数计算上，都用上了