JQUERY WEB照片滤镜-INSTAGRAM FILTERS APP

所属分类：媒体-图像

38634 303 查看评论 (6)

分享到微信朋友圈

查看演示立即下载

插件描述：今天我要给大家介绍一款由jquery打造的web app：Instagram Filters，该插件允许我们将一张照片拖放到网页中，然后给照片加上各种各样的滤镜，处理完照片后，还可以将照片保存到自己的电脑中。

更新时间：2019-09-18 13:56:34

更新说明：修改jq库地址失效问题,修改演示文件提示

今天我要给大家介绍一款由jquery打造的web app：Instagram Filters，该插件允许我们将一张照片拖放到网页中，然后给照片加上各种各样的滤镜，处理完照片后，还可以将照片保存到自己的电脑中。

使用步骤

1、引入以下的js和css文件

<link href="assets/css/style.css" rel="stylesheet">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/js/filereader.min.js"></script>
<script src="assets/js/caman.full.js"></script>
<script src="assets/js/jquery.mousewheel.min.js"></script>
<script src="assets/js/script.js"></script>

2、在body标签中加入以下格式的html代码，其中分为两部分，#photo就是我们可以拖放并预览照片的div，而#filterContainer则是，我们添加滤镜的容器。

<div id="photo">
</div>
<div id="filterContainer">
    <ul id="filters">
         
        <li>
            <a href="#" id="normal">Normal</a>
        </li>
 
        <li>
            <a href="#" id="vintage">Vintage</a>
        </li>
 
        <li>
            <a href="#" id="lomo">Lomo</a>
        </li>
 
        <li>
            <a href="#" id="clarity">Clarity</a>
        </li>
 
        <li>
            <a href="#" id="sinCity">Sin City</a>
        </li>
 
    </ul>
 
</div>