还是前端图片的老话题，花了半天时间，东拼西凑，凑出个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. 《Linux内核设计与实现》CHAPTER5阅读梳理

    <Linux内核设计与实现>CHAPTER5阅读梳理 [学习时间:2.5hours] [学习内容:系统调用的概念.功能及实现:系统调用的创建和使用方法] CHAPTER5 系统调用 1.系 ...

  2. iOS一些系统事件的生命周期

    1.- (void)applicationWillResignActive:(UIApplication *)application 说明:当应用程序将要入非活动状态执行,在此期间,应用程序不接收消息 ...

  3. 安装docker-compose

    下载到合适的位置 curl -L https://github.com/docker/compose/releases/download/1.8.0/docker-compose-`uname -s` ...

  4. XSS (Cross Site Scripting) Prevention Cheat Sheet(XSS防护检查单)

    本文是 XSS防御检查单的翻译版本 https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sh ...

  5. grunt安装、配置、在webstrom中使用

    1.全局范围安装 Grunt命令行(CLI) npm install -g grunt-cli Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt.这样带来的好处是,允许 ...

  6. svg学习（五）ellipse

    <ellipse> 标签 <ellipse> 标签可用来创建椭圆.椭圆与圆很相似.不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的. <?xm ...

  7. ZoomBar 设计

    package com.example.canvasdemo; import android.content.Context; import android.graphics.Canvas; impo ...

  8. Spring MVC 学习资料

    引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Jav ...

  9. Java 可变参数列表

    1．可变参数列表的简单实现 当调用方法时,方法的参数个数或类型未知时,称其为可变参数列表.在以前的Java代码中,可以使用Object数组来实现这样的功能.因为,所有的类都是直接或间接继承于Objec ...

  10. Scala入门学习笔记四--List使用

    前言 本篇将介绍一个和Array很相似的集合List,更多内容请参考:Scala教程 本篇知识点概括 List的构造 List与Array的区别 List的常用方法 List伴生对象的方法 ::和:: ...