JQUERY WEB照片滤镜-INSTAGRAM FILTERS APP

所属分类:媒体-图像

 38634  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 文件,里面会有相关的配置,在这里我就不讲解了。

相关插件-图像

移动端图片滤镜效果

在手机上常用到的图片滤镜效果
  图像
 28844  385

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 28722  319

二维码生成插件qrcode.js

二维码生成插件qrcode.js,在此插件基础上添加了logo图片功能和对中文的支持,无需对中文转码可直接支持生成中文网址二维码
  图像
 29870  375

橡皮擦--图片擦除效果

电脑端、移动端(Android、ios等)都可适应!
  图像
 51632  443

讨论这个项目(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
        可以吧,把图片拖进去
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复