在线生成supreme风格图片

原文链接： https://justforuse.github.io/blog/zh-cn/2018/12/supreme-image/

---

最近被本山大叔鬼畜洗脑了?：https://www.bilibili.com/video/av19390801?from=search&seid=2488280777914879673

supreme风格图片也是土潮土潮的，所以就来做一个sp风格图片生成器吧~

sp风格图片需要使用些CSS filter属性，https://developer.mozilla.org/en-US/docs/Web/CSS/filter 这里使用grayscale 和blur属性，即灰度和模糊度。

还需要制作supreme图片，使用PhotoShop，不要用PS?

另外还要有设置logo位置、大小、透明度的功能，这些都是用input type为range的控件实现 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

• 使用Vue做数据绑定
• 使用html2canvas库保存图片（但是无法保存图片的灰度和模糊，需要手动截图。。）

github地址： https://github.com/justforuse/supreme-image

在线生成网址： https://justforuse.github.io/supreme-image/

一些示例图片