2014年11月2日 星期日

圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect 程式範例 @ GitHub

應該大家都發現到了我最近都沒有新的文章發表,反倒是一直整理以往部落格文章的範例程式然後放到 GitHub 上,必須老實說,最近一個月為了工作上的新技術需求,所以都在研究、練習中,在公司裡花了很多的時間以及腦力在學習新技術,以致於下班之後就沒有多餘的力氣去寫新的技術文章,既使到了週末休假也是一樣。

所以現在能夠做的事情就是整理以前的文章範例程式,一方面做整理,另一方面也是做複習的動作,因為我並不是直接把以前寫好的程式放到 GitHub 上,而是在 VS2013 裡開新的專案,然後照著以前的文章的內容與描述並且看著就程式再重新做一次。

以這一篇來說,原本的範例程與文章是在兩年多前就已經寫好的,當時是用 VS2010 來開發的,時至今日,我連自己的開發電腦也不再安裝 VS2010 了,所以還必須先準備一台 Windows 7  虛擬機器,再安裝 VS2010,還原當初寫文章做範例的情境,雖然是按照當初的文章與程式來重新做一次,不過還是有做了一小部分的修改與調整,不要以為重新照著做會很快也很容易,實際做過幾次之後就會有種感覺,那種感覺就是我還真不知道以前我腦袋是在想什麼,怎麼有些地方的寫法會是那樣做咧?有一種想把拳頭往那個傢伙腦袋敲下去的衝動。

 


Mvc5.ImageCrop.Sample

圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect 程式範例

https://github.com/kevintsengtw/Mvc5.ImageCrop.Sample

image

 

相關部落格文章連結:

圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect

圖片裁剪大頭貼功能 - ASP.NET WebForm + jQuery + imgAreaSelect

圖片裁剪大頭貼功能 - ASP.NET (MVC, WebForm) + jQuery + imgAreaSelect 原始檔

ASP.NET MVC 3 + jQuery imgAreaSelect + fancyBox

 

使用的第三方套件:

imgAreaSelect

Website , GitHub Repository

Bootstrap Filestyle - jQuery Customization of input html file for Bootstrap Twitter

WebSite , GitHub Repository

ALERTIFY JS

WebSite , GitHob Repository, NuGet

fancybox

WebSite , GitHub Repository , NuGet

 

在「VS2010」目錄裡則是原本文章裡所提供的程式範例,而原本所提供的程式範例是使用 Dropbox 所分享的,所以有可能哪一天會連結失效。

image

 

MVC5_ImageCrop

 

image

 

ImageCrop.MVC

以下為網站執行的各個頁面的操作截圖

image

image

image

image

image

image

image

而 ImageCrop.WebFrom 的畫面就不做截圖了,因為跟 ImageCrop.Mvc 其實差不多。

 

MVC5_ImageCropAdvanced

這一個範例是「ASP.NET MVC 3 + jQuery imgAreaSelect + fancyBox」這篇文章裡的範例再重新改寫,原本是在 VS2010 用 ASP.NET MVC 3 所開發的,而現在新的範例則是使用 VS2013 與 ASP.NET MVC 5 所開發,除了範本都已使用 Bootstrap 3 外,我還有在範例用了過去我介紹過的套件,例如 RouteJS,因為我將原本放在 View 裡面的 Javascript code 給抽離出來,所以在 Javascript code 有使用到 ASP.NET MVC Route 的部分都改用 RouteJS,這麼一來就解決了獨立 Javascript file 裡如何取得 Route 的問題,

ASP.NET MVC - 使用 RouteJs - Part.1

ASP.NET MVC - 使用 RouteJs - Part.2

ASP.NET MVC - 使用 RouteJs - Part.3

另外在頁面的訊息顯示功能則是使用了「Alertify JS」,另外有興趣研究 javascript code 的朋友也可以看看我在專案裡的寫法,這種使用了 namespace 概念的寫法,讓我的 javascript code 比較有架構性。

image

 

網站執行畫面

image

image

image

image

image

image

image

image

 


重新整理這些範例還真的蠻耗時間,只是相較於我寫一篇新的技術文章所使用的時間相比,就少了許多,當我要寫一篇新的技術文章時,從一個發想(例如看到某個功能操作可以搭配 ASP.NET MVC 來實現,或是有些朋友的提問等),然後開始各種嘗試的實作(這大部分要花個好幾天的時間,這期間就是不斷的開新專案然後重複不斷地實作),等到做得差不多而且有做出一個可應用在一般專案的形式,這個時候就差不多要來構思文章要怎麼寫、範例要怎麼做,我會先列出文章大綱,要寫些什麼、要做出什麼,然後就是建立專案,一邊實作並一邊寫文章、截圖等,快的話,一篇文章大約四個小時就可以完成,但如果遇到問題或是實作上有困難的話,那麼一篇文章可能就會拖到兩三天才寫得完,所以一篇文章的開始到完成,要經歷這麼一連串的過程,每一篇文章都是無數次的實作與嘗試而完成的。

我的文章產量其實不是很大,雖然說要完成一篇文章是需要很多時間,但我也不是整天不用工作就只有寫文章、做範例而已,大部分都是用零碎的時間來完成,所以有時候參加 twMVC 週四晚上聚會的朋友就有可能看到我正在寫文章或是在寫範例程式。

我通常會一次進行好幾篇文章的準備、寫作與實作範例的作業,這無關時間是否夠用或是會不會搞混,只要我腦袋還夠清楚,還有餘力可以思考的話,同時進行好幾篇文章的準備作業是可以的(不過工作上的事情就無法這樣多工,畢竟寫文章是沒有所謂上線時間,也不需要對特定某一個客戶做交代),但如果遇到工作上已經勞心勞力的狀況,這時候文章的產出就會比較緩慢,甚至於停頓,工作上的事情還是比較重要的。

多做範例、多方嘗試、多元思考,這是讓你程式精進的捷徑,而且要時時對我們自己所產出的程式抱持質疑的態度,並且像自己提出疑問,試著找出問題或是改進的做法,這無須對任何人做交代或負責,因為這是我們自己身為程式開發人員就應該做的事情。

 

以上

6 則留言:

  1. 感謝 Kevin 大的好文分享,明天來練習,讚!

    回覆刪除
    回覆
    1. 感謝你的回應,也可以練習這幾天大家一直狂推的功能,利用 HTML 5 所做出來的,
      Image Resizing with Canvas
      http://tympanus.net/Tutorials/ImageResizeCropCanvas/

      刪除
    2. 補充製作說明文章連結
      http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/

      刪除
  2. Kevin老師好,
    之前剛好也遇到有剪裁需求,從Jcrop一路找到imgAreaSelect,做完以後才發現原來老師早就寫過相關文章,相見恨晚阿!!!

    只是我的邏輯是先在Parent頁面上傳圖片 -> 彈跳視窗 -> 叫出剪裁功能 -> 剪裁完傳回Parent頁面

    最後用fancybox解決了~

    現在剛好可以參考老師來檢討自己不足的部分,謝謝

    回覆刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。