利用imgateaselect插件實現前端頁面圖片截取功能

時間 2020-05-20

標籤利用 imgateaselect 插件實現前端頁面圖片截取功能简体版

原文原文鏈接

imgateaselect插件是一個基於Jquery的一款圖片截取插件，這個插件不是真的對圖片進行截取，而是對原圖片進行圖層覆蓋，而後經過CSS樣式進行相關截取，獲得截取圖片的座標位置，利用回調函數，作一些須要的操做，它能夠控制截取的大小，長寬比例，初始截取位置等等。javascript

效果以下圖：

一、官方地址 http://odyniec.net/projects/imgareaselect/

二、引用相關文件

<head>

  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

 <script type="text/javascript" src="scripts/jquery.min.js"></script>

  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

</head>

三、對控件進行檢測，而後對其進行設置效果

  
  
  
  
   
   
   
   <script type="text/javascript"> css
   
   
   
       $('#idImg').imgAreaSelect({ java
   
   
   
               handles : true, jquery
   
   
   
               x1 : 120, ide
   
   
   
               y1 : 90, 函數
   
   
   
               x2 : 280, spa
   
   
   
               y2 : 210, .net
   
   
   
               onSelectEnd : updateCoords 插件
   
   
   
           }); blog
   
   
   
   function updateCoords(img, selection) { 
   
   
   
           $('#x1').val(selection.x1); 
   
   
   
           $('#y1').val(selection.y1); 
   
   
   
           $('#x2').val(selection.x2); 
   
   
   
           $('#y2').val(selection.y2); 
   
   
   
           $('#height').val(selection.p_w_picpathWidth); 
   
   
   
           $('#width').val(selection.p_w_picpathHeight); 
   
   
   
       } 
   
   
   
   </script>

座標圖

詳細其餘設置，參照官方文檔和實例

相關標籤/搜索