还是前端图片的老话题，花了半天时间，东拼西凑，凑出个demo，优点在于代码少，核心代码就6行，目前刚做了旋转，缩放，裁剪，滤镜要js做，网络上也有现成的代码，

但是想做到自定义的滤镜咋办呢？这还要从底层了解滤镜的实现才行~实际上，我们无论用C++，还是java实现了滤镜，都能移植到js端，原理是相通的。

总之，再次强调，原理很重要，掌握了原理，你就可以任性了。

可以放到http://runjs.cn/里做验证，好棒的在线工具~

<!DOCTYPE html>
<html>
  <head>
 <meta charset="utf-8" />
 <title>js+css3</title>
  </head>
 <style type="text/css">
  .clipzone
  {
   position:relative;
   width:400px;
   height:400px;
   overflow:hidden;
  }
  .clipped
  {
   position:absolute;
  }
 </style>
  <body>
  <input type="button" value="rotate" onclick="rotate(20);"/>
  <input type="button" value="scale" onclick="scale(1.5);"/>
  <input type="button" value="clip" onclick="clip();"/>
  <input type="button" value="support_canvas_test" onclick="support_canvas_test();"/>
    <div class="clipzone" id="testdiv">
  <img class="clipped"  id="image1" src="http://www.artup.com/img/icon35.png" width="282" height="220" >
  </div>
    <script type="text/javascript">
   var totalrotate = 0;
   var totalscale = 0;
   function rotate(sum){
   totalrotate = totalrotate + sum;
      var obj=document.getElementById("image1");
   obj.style.webkitTransform="rotate("+totalrotate+"deg)";
     }
   function scale(sum){
   totalscale = totalscale + sum;
      var obj=document.getElementById("image1");
   obj.style.webkitTransform="scale("+totalscale+")";
     }
   function clip(){
      var obj=document.getElementById("image1");
   obj.style.clip = "rect(20px, auto, auto, 10px)"; 
     }
  function support_canvas_test(){ 
   var elem = document.createElement('canvas');
   var context = elem.getContext('2d');  
   alert(typeof context.fillText === 'function'?"support":"not support");  
  }
  var support_css3 = (function() {
   var div = document.createElement('div'),
    vendors = 'ms o moz webkit'.split(' '),
    len = vendors.length;
    
  return function(prop) { 
   if ( prop in div.style ) return true; 
   len = vendors.length;
   while(len--) {
     if ( vendors[len] + prop in div.style ) {
     return true; 
     } 
   } 
   return false;
     }; 
 })();
 
    </script>
  </body>
</html>

用Js+css3实现图片旋转，缩放，裁剪，滤镜的更多相关文章

  1. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  2. iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

  3. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  4. Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...

  5. JS实现网页背景旋转缩放轮播效果

    实现效果:效果预览 css代码: .switch_images { display: inline-block; margin:; padding:; width: 100%; height: 100 ...

  6. Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...

  7. 【js】js 让图片旋转

     转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...

  8. js手写图片查看器（图片的缩放、旋转、拖拽）

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  9. js实现图片查看器（图片的缩放、旋转、拖拽）

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

随机推荐

  1. Qt字符串类——1.字符串常用的几种操作

    字符串有如下几个操作符: (1)QString提供了一个二元的"+"操作符用于组合两个字符串,并提供了一个"+="操作符用于将一个字符串追加到另一个字符串的末尾 ...

  2. LeetCode Alien Dictionary

    原题链接在这里:https://leetcode.com/problems/alien-dictionary/ 题目: There is a new alien language which uses ...

  3. linux中ONBOOT=yes的含义

    在/etc/sysconfig/network-scripts/ifcfg-eth0(确认ONBOOT=yes),其中eth0是设备名 ONBOOT是指明在系统启动时是否激活网卡,只有在激活状态的网卡 ...

  4. 如何使用Sitemap和menu创建网站导航

    1.添加Sitemap文件 将Sitemap内容替换为如下示例代码: <?xml version="1.0" encoding="utf-8" ?> ...

  5. oracle deterministic 关键字

    多次看到DETERMINISTIC,一直很疑惑,今天做了一个实验.我们欺骗Oracle说是一个DETERMINISTIC函数,它在SQL中只调用一次.如果不使用DETERMINISTIC,可以看到出来 ...

  6. 安装eclipse与pydev

    按照此文档 最简单的eclipse安装方法 sudo apt-get install eclipse 弊端:因为ubuntu默认安装的不是最新版本的eclipse,所以你也不能安装最新的pydev. ...

  7. git设置hooks 钩子

    github是可以设置hooks的,看:在设置webhooks & services,可在Just the push event.是设定向你的服务器发请求,然后再做相应的处理. https:/ ...

  8. Android -- 使用ViewPager实现画廊效果

    1,今天在微信推送文章看到实现画廊效果,感觉挺不错的,就来写写试试,先来看一下效果图: 上面的效果基本上可以用两个功能点来包含:ViewPager的切换动画.ImageView的倒影的实现 嗯,先来将 ...

  9. Android -- 是时候来了解一波EventBus了

    1,最早在项目中使用EventBus是在去年的时候,但自己一直没抽出时间来记录记录一下,今天就来简单的使用一下,先看一下EventBus的定义是什么 EventBus:是一个发布 / 订阅的事件总线. ...

  10. 一种比较少见的C#代码段

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...