请问如何实现图片中效果的效果?

Question

更换头像 后面的背景图片跟着头像的颜色更换,但是后面背景图片的颜色比较浅

• 哪位兄弟能提供一点思路?

• 最好提供 demo 演示一下?

Answer 1

用canvas来加载图片，HTML5 canvas有getImageData()方法可以获取某一点的像素的颜色，然后将颜色变浅（效果可以加透明度来时间），不过可能获取像素的那一点可能不是你想要的颜色。
觉得最好是提交到服务器处理吧

Answer 2

这难道不是一个白色的半透明蒙版吗？

Answer 3

按照你所说，你需要将获取整个图片的主色调，然后将背景设置为与主色调一致的，但是颜色稍淡的颜色，可以使用透明度，或者你也可以降低颜色深浅。如果你背景是图片的话，那你得根据颜色来换图了。

获取主色调的库还蛮多的，比如，DBImageColorPicker等。

Answer 4

应该是上面加一层半透明的遮罩，遮罩下面的是放大后的头像