問題所在

最近公司編輯在發(fā)布新聞的時候遇到一個問題，編輯后臺提供的原有的圖片裁剪功能在移動端和一些特定類型的顯示時達不到具體的要求。最后去深究發(fā)現(xiàn)我們的服務器對上傳上來的圖片進行了一次裁剪，為了減小圖片大小對它進行了不同比例，不同尺寸的裁剪。但這種裁剪會丟失一些圖片上的信息，對于我們這種信息傳遞的公司肯定是不希望的。如何解決，有如下方案：

讓編輯學會Photoshop自行編輯圖片上傳（讓每個編輯改編自己的工作習慣不現(xiàn)實）

我們開發(fā)一個簡單、易用的在線圖片編輯功能（能用功能解決的都不是問題）

所以基于上面所說的這些，這個功能放在后端顯然不現(xiàn)實。為了一個小的功能改變現(xiàn)有的業(yè)務邏輯，所以就想放在前端先把圖片裁剪好，然后上傳服務器。服務器的裁剪后最后選擇最全的那一張，顯然服務器現(xiàn)在也是這么做的。

圖片裁剪功能

首先想到的是有沒有這樣的插件可以使用，幸運的是有這樣的一個優(yōu)秀插件可以使用cropper.js.翻看了它的文檔，發(fā)現(xiàn)也是很好使用的。

<!-- Wrap the image or canvas element with a block element (container) --> <div><img id="image" src="picture.jpg"> </div> $('#image').cropper({aspectRatio: 16 / 9,crop: function(e) {// Output the result data for cropping image.console.log(e.x);console.log(e.y);console.log(e.width);console.log(e.height);console.log(e.rotate);console.log(e.scaleX);console.log(e.scaleY);} });

但是細細研究了下發(fā)現(xiàn)它是使用了canvas進行的圖片裁剪，所以只有在現(xiàn)代瀏覽器才能支持。咨詢了下需求，慶幸的是我們的系統(tǒng)不考慮兼容性。那就好辦了，既然已有了好的輪子為什么不用。
之前我們的圖片上傳是這樣的，非常簡陋。就根本是個按鈕上傳圖片，沒有什么交互體驗。
圖片按鈕如下，

選擇圖片后如下，

這樣的肯定是不行的，必須首先將圖片呈現(xiàn)出來。但是javascript操作在瀏覽器環(huán)境中讀取文件肯定是很困難的。window.URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。這樣就可以對本地上傳圖片進行操作了。

//local image changefunction setImagePreview(avalue) {var docObj=document.getElementById("doc"),imgObjPreview=document.getElementById("image"),img_src;if(docObj.files[0].size/1024/1024 > 1.2) {alert('請選擇小于1.2M圖片');return false;}if(docObj.files &&docObj.files[0]) {//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式img_src = window.URL.createObjectURL(docObj.files[0]);imgObjPreview.src = img_src;} else {//IE下，使用濾鏡docObj.select();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("localImag");//必須設置初始大小localImagId.style.width = "150px";localImagId.style.height = "180px";//圖片異常的捕捉，防止用戶修改后綴來偽造圖片try {localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;img_src = imgSrc;} catch(e) {alert("您上傳的圖片格式不正確，請重新選擇!");return false;}imgObjPreview.style.display = 'none';document.selection.empty();}return img_src;}

選擇圖片后引入cropper.js，效果如下

代碼如下：

/*init cropper*/function cropperContainer() {var cropperContainer = $('#image').cropper({aspectRatio: 4/3,viewMode: 1,autoCropArea: 1,cropBoxResizable:true});}//init croppercropperContainer();$('#cropper').on('click', function() {var croppedCanvas,roundedCanvas;/*if (!croppable) {return false;}*/$('.cropper-text').show();// truecroppedCanvas = $('#image').cropper('getCroppedCanvas');// RoundroundedCanvas = getRoundedCanvas(croppedCanvas);//truevar base64 = roundedCanvas.toDataURL();// var imgData = base64.split(',')[1];// imgData = window.atob(imgData);// var resultData = new Uint8Array(imgData.length);// for(var i = 0; i < imgData.length; i++) {// resultData[i] = imgData.charCodeAt(i);// }// var blob = new Blob([resultData], {type:'image/png'});// Show$('#results').html('<img src="' + base64 + '">');$('#save-btn').click(function() {window.opener._getImageObj(base64);window.close();});});

最終得到的是一個base64圖片，通過ajax提交給服務器似乎會因為base64太大提交不成功。然后我做了個很傻的事情，將base64轉(zhuǎn)化為blob轉(zhuǎn)化為文件

//base64 to blob then to filefunction to_blob(base64) {var imgData = base64.split(',')[1];imgData = window.atob(imgData);var resultData = new Uint8Array(imgData.length);for(var i = 0; i < imgData.length; i++) {resultData[i] = imgData.charCodeAt(i);}//convertvar blob = new Blob([resultData], {type:'image/png'});var file = new File([blob], 'upload_'+Date.now()+'.png', {type: 'image/png', lastModified: Date.now()});return file;}

最后又將整個表單通過FormData對象轉(zhuǎn)化為javascript對象提交到后臺。
裁剪后如圖，

總結(jié)

其實在我說來似乎沒什么技術(shù)含量，但是在具體的生產(chǎn)環(huán)境中將插件集成上去也是遇到了很多麻煩。比如當處理跨域的用document.domain來處理，并且要在已成型的系統(tǒng)中迎合原有的后臺架構(gòu)。后端的支持極其的少，所以幾乎是去了解后端的業(yè)務邏輯，然后完成的功能。

轉(zhuǎn)載于:https://www.cnblogs.com/marvinemao/p/7757671.html

總結(jié)

以上是生活随笔為你收集整理的图片裁剪功能集成优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。