我想通过Javascript创建照片滤镜

Question

在将照片上传到服务器之前，我想修改图像的背景，布局，..，例如Instagram的照片滤镜（请查看附件图像）。

请帮助我，使用jQuery插件还是库？

Answer 1

对于样式图像，您应主要使用CSS。这里有相当不错的CSS库。例如Instagram.css

<link rel="stylesheet" href="instagram.min.css">

从可能的类别列表中添加类别filter-[filter-name]：

<figure class="filter-[filter-name]">
  <img src="assets/img/instagram.jpg">
</figure>

结果：

然后您可以使用javascript或jQuery动态添加类并应用过滤器。

Answer 2

我认为这是解决您问题的方法 https://www.html5rocks.com/en/tutorials/canvas/imagefilters/#toc-conclusion https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL