用Js+css3實現圖片旋轉，縮放，裁剪，濾鏡

時間 2019-12-01

標籤 js+css3 css 實現圖片旋轉縮放裁剪欄目 JavaScript 简体版

原文原文鏈接

仍是前端圖片的老話題，花了半天時間，東拼西湊，湊出個demo，優勢在於代碼少，核心代碼就6行，目前剛作了旋轉，縮放，裁剪，濾鏡要js作，網絡上也有現成的代碼，javascript

可是想作到自定義的濾鏡咋辦呢？這還要從底層瞭解濾鏡的實現才行~實際上，咱們不管用C++，仍是java實現了濾鏡，都能移植到js端，原理是相通的。css

總之，再次強調，原理很重要，掌握了原理，你就能夠任性了。html

能夠放到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>java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。