Jquery 裁剪圖片外掛imgAreaSelect應用注意點整理
背景:接之前的內容,在專案中已經開始用外掛imgAreaSelect了,使用過程中遇到了一些問題。
1.點選圖片裁剪按鈕,進行初始框設定時:
a.裁剪區域完全被藍色覆蓋,看不到內容 => 造成原因是在給圖片繫結裁剪內容時,設定了selectionColor: 'blue',改成空格或者去掉這個屬性就可以了。
2.頁面展示完成後,滑動滑鼠滑輪,然後再點選圖片裁剪按鈕,此時初始裁剪區域會掉到圖片下面 => 造成原因是設定初始裁剪框時沒有設定parent屬性,取的是預設值body,將該屬性設定成存放圖片的父元素就可以了parent: '.search_img_show' (.search_img_show 這個值是按照jquery選擇器填寫的),這樣設定之後就正常了。
3.在點選搜尋按鈕時,在處理事件函式裡需要判斷當前有沒有裁剪內容(imgAreaSelect 的處理狀態onSelectEnd對應的函式有實時的將資訊寫入隱藏域),此時驗證的欄位可以取selection.width對應的隱藏域。這樣可以避免設定了初始裁剪區域,但是取消了裁剪操作後,點選搜尋按鈕依舊會提交表單的錯誤。
相關推薦
Jquery 裁剪圖片外掛imgAreaSelect應用注意點整理
背景:接之前的內容,在專案中已經開始用外掛imgAreaSelect了,使用過程中遇到了一些問題。 1.點選圖片裁剪按鈕,進行初始框設定時: a.裁剪區域完全被藍色覆蓋,看不到內容 => 造成原因是在給圖片繫結裁剪內容時,設定了selectionColor: '
JavaScript基礎語法知識注意點整理
1.用JavaScript編寫的程式碼必須通過HTML/XHTML文件才能執行。有兩種方式: 第一種方式是將JavaScript程式碼放到文件<head>標籤中的<script>標籤之間; 第二種方式是將JavaScript程式碼存為一個副檔名為.js的獨立檔案,典型做法是在文件的&l
基於jQuery和cropper點選頭像上傳並預覽裁剪圖片
使用jquery上傳前,預覽圖片,裁剪,示例使用php接收上傳的檔案,並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片,只需要本地裁剪好即可,裁剪的時候也可以旋轉圖片。裁剪控制元件使用了,cropper。 html程式碼 <!DOCTYPE html> <html la
編寫自定義的JQuery外掛的幾個注意點
前言 在巨人的肩膀上做事,不出意外的外,你會站的高看得遠!外掛是對功能的封裝,自定義的外掛來擴充套件jQuery,不僅可以促進程式碼的特定風格,而且可以利用jQuery的提供的豐富API,何樂而不為! 一,擴充套件jQuery的形式 在$(jQue
基於jquery的圖片裁剪外掛詳解
cropper外掛的使用參考 cropper介紹 相容所有支援了Canvas的瀏覽器(IE9+),一小部分功能例外,對移動端操作也有適配,支援裁剪、旋轉、翻轉等,具體請檢視官方文件。 但是它並沒有對圖片真正的處理,只是記錄了使用者做了哪些變換,然後
基於Visual C 2010開發Windows7應用 多點觸控圖片處理應用程式 1 同時處理多張圖片
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
強大的jQuery焦點圖外掛Owl Carousel + 響應式圖片(案例解析)
GitHub地址:https://github.com/OwlCarousel2/OwlCarousel2 在各式各樣的網站中,都能看到焦點圖外掛的身影。 一個好的焦點圖外掛必須滿足以下特點:1. 支援不同數量的圖片 2. 支援響應式佈局 3. 具有良好的相容性 Owl Carousel
jquery.cookie用法及其注意點
jquery.cookie是一個輕量級的cookie外掛,由於已被封裝好,可拿來即用。 基本的建立、讀取、刪除見另一篇文章 淺談localStorage、sessionStorage 與cookie 。 從名字上就可以看出jquery.coo
JQuery 中 :first 選擇器的使用注意點
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d
jquery外掛spinner,注意事項
<!-- 選單新增 Start --> <div class="col-sm-10" id="addMenuDiv" style="display: none;width: 100%"> <div class="panel panel-defa
jquery.fileupload.js外掛使用初探--多圖片上傳預覽
一、前臺程式碼: <!DOCTYPE html> <html> <head> <title>jquery.fileupload.js使用測試</title> <script src="jq
jquery-ui datepicker外掛在頁面第二次點選時無效的問題
頁面結構是這樣的: 一個大的main父頁面中嵌有子頁面,點選選單切換時,main頁面不變,子頁面切換。 a、b兩個子頁面中都有datepicker控制元件。 問題現象: 頁面初始化後,在第一個子頁面中初始化datepicker,正常。點選選單切換子頁面,其後的所有datep
表格外掛bootstrapTable中隱藏和顯示某列及一些小注意點
html程式碼: <table id="docDateTable" class="table table-hover table-bordered" style="color: #000000"> <thead style="back
jquery.fileupload.js外掛使用初探--單圖片上傳預覽
一、官方外掛下載地址:http://plugins.jquery.com/blueimp-file-upload/ 下載下來後會發現裡面包含了一堆檔案,首先需要弄清楚的是最核心的部分是哪些,根據官方的例子可以知道,一個最簡單的jQuery File Uplo
NSIS外掛開發的幾個注意點
1、不要使用NSIS自帶的pluginapi.lib,自己手動把pluginapi.h和.c檔案放到工程裡編譯。這兩個檔案在nsis-2.51-src\Contrib\ExDLL中能找到。 2、匯出的介面用C格式,不要使用C++格式,否則不能這樣使用:XXXNsisPlug
使用jquery設定圖片只可點選一次
有時候我們需要實現某元素,例如圖片在一次訪問中只能夠點選一次,這時候我們需要使用jquery註冊一個事件,但是在時間完成後“解綁”這個函式: //設定點選事件 $('.img_class').click(function(){ &nbs
【jQuery】圖片燈箱外掛——lightBox
該外掛可以用圓角的方式展示選擇中的圖片,使用按鈕檢視上下張圖片,在載入圖片時自帶進度條,還能以自動播放的方式瀏覽圖片,呼叫格式如下: $(linkimage).lightBox({options}) 其中linkimage引數為包含圖片的<a>元素名稱,o
jquery實現圖片點選旋轉
function getmatrix(a,b,c,d,e,f){ var aa=Math.round(180*Math.asin(a)/ Math.PI); var bb=Math.round(180*Math.acos(b)/ Math.PI); var
libevent2筆記(Timer和Http Client的應用和注意點)
1.初始化 Windows上需要自己初始化系統網路庫,即呼叫 WSADATA WSAData; WSAStartup(0x201, &WSAData); 結束使用時再 WSACleanup(); 另外還需要初始化執行緒設定 windows
15個超強的jQuery/HTML5圖片輪播外掛
最近我們為大家分享過不少基於jQuery的圖片輪播外掛,當然也有很多使用了HTML5和CSS3的相關技術,讓整個圖片播放器顯得更加美觀,動畫效果顯得更加炫酷。這次我們特意為大家篩選了一些最新的jQuery/HTML5圖片輪播外掛,每一個的功能都比較強大,當然可能