还是前端图片的老话题，花了半天时间，东拼西凑，凑出个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. CentOS - 开机自动发送IP到指定邮箱 - smtp.163.com

    1.简介: 服务器有时候是通过DHCP方式获取IP,一般服务器连个网线和电源就好了,要是每次开机还得连个显示器和键盘看看IP是多少就很不方便.懒人就让它自动发送个邮件.这里采用CentOS,163邮箱 ...

  2. 我的PhoneGap安装配置经历

    一.PhoneGap简介 PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用 iPhone,Android,Palm,S ...

  3. Qt串口通信接收数据不完整的解决方法

    在使用串口接收数据时,当数据量大的时候会出现数据接收不完整的情况.因为串口数据获取函数readAll()由readyRead()信号触发,但readyRead()信号在串口读到起始标志时立即发送,并不 ...

  4. IntelliJ IDEA全文搜索很给力

  5. git cherry-pick. 如何把已经提交的commit, 从一个分支放到另一个分支

    问题 在本地master提交了一个commit(8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f),如何提交的test_2分之上? 方法 使用cherry-pick 用 ...

  6. cat hesA/Models/score_tgt.sc| awk '{ print $2,$19}' | sort -n -k 1

    cat hesA/Models/score_tgt.sc| awk '{ print $2,$19}' | sort -n -k 1 print the second collum in order

  7. 简单的bat命令去获取wsdl的源码

    @echo off cd C:\Program Files\Java\jdk1..0_45\bin for /R "D:\wqcCode\company\emtproj\02 Require ...

  8. Zju1015 Fishing Net

    弦图判定 代码 #include<cstdio> #include<queue> #define mp make_pair #define fi first #define s ...

  9. 处理 httprequest post 编码问题

    site :http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html 在JavaScript中推荐的做法是用encodeURI对URI的 ...

  10. C#.NET 字符串转数组，数组转字符串

    string str = "1,2,3,4,5,6,7";            string[] strArray = str.Split(','); //字符串转数组      ...