在移動端開發的過程中,或許會遇到對圖片裁剪的問題。當然遇到問題問題,不管你想什么方法都是要進行解決的,哪怕是丑點,難看點,都得去解決掉。
圖片裁剪的jquery插件有很多,我也測試過很多,不過大多數都是支持pc端的圖片裁剪,而支持移動端圖片裁剪的少,很流暢的可能就會更少了。
作為一個新手,我嘗試了很多種解決方法,在初始的時候嘗試自己寫一個jquery插件支持觸屏事件等,寫出來了,但是覺得都不好意思拿出手,更別說拿出來商用了。
又嘗試找了一些插件,一個個試。最后綜合評價,感覺還不錯的jquery插件:cropper這個jquery創建。
看了一下感覺還是挺簡單的。demo:http://fengyuanchen.github.io/cropper/
下面就是我使用過程的一些代碼,希望能對大家有所幫助。
插件導入:
- <link rel="stylesheet" href="/css/delimg/cropper.css"/>
- <script src="/js/libs/jquery.min.js"></script>
- <script src="/js/delimg/cropper.js"></script>
必要的一點html代碼:
- <div class="img-container">
- <img src="" alt="">
- </div>
注意:一般情況下,圖片會動態生成,所以當前的src值,為空。如果你是靜態圖片進行圖片截取,那就更簡單了。看下面代碼就懂了。
插件的使用(很簡單):
- var $image = $('.img-container > img');
- $image.attr("src", imgurl);
- $image.on("load", function() { // 等待圖片加載成功后,才進行圖片的裁剪功能
- $image.cropper({
- aspectRatio: 1 / 1 // 1:1的比例進行裁剪,可以是任意比例,自己調整
- });
- })
現在只是做了一個框架,最主要的是下面的代碼,獲取到圖片的數據才是最主要的,所以我們需要利用到canvas的特異功能,將圖片裁剪的部分轉化為base64的字符串進行前后端數據的交互。
然而,cropper並不會給你提供現成的base64字符串,但是他給你了一串的數據對象,供你自己任意發揮。
點擊某個按鈕時,確定剪裁這一高亮的部分:
- $(selector).on("tap", function() {
- var src = $image.eq(0).attr("src");
- var canvasdata = $image.cropper("getCanvasData");
- var cropBoxData = $image.cropper('getCropBoxData');
- convertToData(src, canvasdata, cropBoxData, function(basechar) {
- // 回調后的函數處理
- });
- })
當然這也不是重點,重點是下面這個函數處理:
- function convertToData(url, canvasdata, cropdata, callback) {
- var cropw = cropdata.width; // 剪切的寬
- var croph = cropdata.height; // 剪切的寬
- var imgw = canvasdata.width; // 圖片縮放或則放大后的高
- var imgh = canvasdata.height; // 圖片縮放或則放大后的高
- var poleft = canvasdata.left - cropdata.left; // canvas定位圖片的左邊位置
- var potop = canvasdata.top - cropdata.top; // canvas定位圖片的上邊位置
- var canvas = document.createElement("canvas");
- var ctx = canvas.getContext('2d');
- canvas.width = cropw;
- canvas.height = croph;
- var img = new Image();
- img.src = url;
- img.onload = function() {
- this.width = imgw;
- this.height = imgh;
- // 這里主要是懂得canvas與圖片的裁剪之間的關系位置
- ctx.drawImage(this, poleft, potop, this.width, this.height);
- var base64 = canvas.toDataURL('image/jpg', 1); // 這里的“1”是指的是處理圖片的清晰度(0-1)之間,當然越小圖片越模糊,處理后的圖片大小也就越小
- callback && callback(base64) // 回調base64字符串
- }
- }
請看demo:http://www.asheep.cn/demo/cropper/
好啦,就到這里了,該處理的東西都處理了,當然這里一個放大縮小的正向處理剪裁,如果需要對圖片的旋轉等一些列的操作的話,也是可以得,這里只是給大家展示一個簡單的demo的實現,如果有用得上的,可以作為參考。
實現方案:使用jquery的imagecropper.js插件中裁剪功能來實現
imagecropper.js這個源碼我找了很久才找到http://pan.baidu.com/s/1oDqRO
代碼量很少就沒有寫注釋了
css
- <style>
- body
- {
- padding: 0;
- margin: 0;
- height: 100%;
- #eee;
- font-size: 12px;
- color: #666;
- }
- a
- {
- text-decoration: none;
- color: #333;
- }
- a:hover
- {
- text-decoration: none;
- color: #f00;
- }
- #container
- {
- position: absolute;
- left: 20px;
- top: 20px;
- }
- #wrapper
- {
- position: absolute;
- left: 0px;
- top: 40px;
- }
- #cropper
- {
- position: absolute;
- left: 0px;
- top: 0px;
- border: 1px solid #ccc;
- }
- #previewContainer
- {
- position: absolute;
- left: 350px;
- top: 60px;
- }
- .preview
- {
- border: 1px solid #ccc;
- }
- #selectBtn
- {
- position: absolute;
- left: 0px;
- top: 0px;
- width: 119px;
- height: 27px;
- }
- #saveBtn
- {
- position: absolute;
- left: 150px;
- top: 0px;
- width: 67px;
- height: 27px;
- }
- #rotateLeftBtn
- {
- position: absolute;
- left: 0px;
- top: 315px;
- width: 100px;
- height: 22px;
- padding-left: 25px;
- padding-top: 2px;
- }
- #rotateRightBtn
- {
- position: absolute;
- left: 225px;
- top: 315px;
- width: 50px;
- height: 22px;
- padding-right: 25px;
- padding-top: 2px;
- }
- </style>
html
- <body onload="init();">
- <div id="container">
- <a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('input').click();">選擇</a>
- <a id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a>
- <input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" />
- <div id="wrapper">
- <canvas id="cropper"></canvas>
- <a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋轉</a>
- <a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋轉</a>
- <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
- <div id="previewContainer">
- <canvas id="preview180" width="180" height="180" class="preview"></canvas>
- <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸圖片,180x180像素</span>
- <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
- <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸圖片 100x100像素</span>
- <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
- <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸圖片 50x50像素</span>
- </div>
- </div>
- </div>
- </body>
最后是js部分了
- var cropper;
- function init()
- {
- //綁定
- cropper = new ImageCropper(300, 300, 180, 180);
- cropper.setCanvas("cropper");
- cropper.addPreview("preview180");
- cropper.addPreview("preview100");
- cropper.addPreview("preview50");
- //檢測用戶瀏覽器是否支持imagecropper插件
- if(!cropper.isAvaiable())
- {
- alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
- }
- }
- //打開本地圖片
- function selectImage(fileList)
- {
- cropper.loadImage(fileList[0]);
- }
- //旋轉圖片
- function rotateImage(e)
- {
- switch(e.target.id)
- {
- case "rotateLeftBtn":
- cropper.rotate(-90);
- break;
- case "rotateRightBtn":
- cropper.rotate(90);
- break;
- }
- }
- //上傳圖片
- function saveImage()
- {
- //選個你需要的大小
- var imgData = cropper.getCroppedImageData(180, 180);
- console.log("上傳了:"+imgData);
- //在這里寫你的上傳代碼
- }