JQUERY WEB照片滤镜-INSTAGRAM FILTERS APP

所属分类:媒体-图像

 38651  303  查看评论 (6)
分享到微信朋友圈
X
JQUERY WEB照片滤镜-INSTAGRAM FILTERS APP ie兼容6

更新时间: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>

参数配置

官方并未提供参数的文档,不过大家可以查看 script.js 文件,里面会有相关的配置,在这里我就不讲解了。

相关插件-图像

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 24599  328

html5前端图片压缩

html5前端图片压缩
  图像
 85032  454

jQuery放大镜插件jqzoom.js

jQuery放大镜插件jqzoom.js
  图像
 101470  435

jQueryphotoClip图片剪裁插件

jQueryphotoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
  图像
 81163  418

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Alex 0
    2018/9/22 16:32:36
    演示用的JQ访问不了所以造成演示不成功,只需要本地下载一个jquery.min.js
        June0
        2019/6/5 14:25:40
        本地添加了jq也无法拖动图片进去
    回复
    莫问 0
    2018/7/20 10:50:52
    图片拖不进去,不支持。
        Alex0
        2018/9/22 16:33:28
        下载一个jquery.min.js放到assets目录下 代码添加
    回复
    Mszhangwei 0
    2017/4/20 19:19:04

    看不了演示呀

        我若英雄一定救美0
        2017/6/8 17:11:16
        可以吧,把图片拖进去
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复