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

時間 2019-12-01

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

原文原文鏈接

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

效果以下圖：css

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

二、引用相關文件jquery

<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">   $('#idImg').imgAreaSelect({           handles : true,           x1 : 120,           y1 : 90,           x2 : 280,           y2 : 210,           onSelectEnd : updateCoords       });function updateCoords(img, selection) {       $('#x1').val(selection.x1);       $('#y1').val(selection.y1);       $('#x2').val(selection.x2);       $('#y2').val(selection.y2);       $('#height').val(selection.imageWidth);       $('#width').val(selection.imageHeight);   }</script>

座標圖spa

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

本文出自「走在將來的路上」博客，請務必保留此出處http://wtf0313.blog.51cto.com/1093061/1187090插件