node.js（express）中使用Jcrop進行圖片剪下上傳功能，node.jsjcrop

node.js（express）中使用Jcrop進行圖片剪下上傳功能，node.jsjcrop

需求說明

簡單來說就是要實現使用者上傳頭像，並且要儲存使用者裁切後的部分作為帳戶圖片。

第一步，選擇圖片：

 

第二步，在彈窗頁面中展現並進行裁切：

 

第三步，點擊“儲存”，上傳伺服器。

實現過程

說來有點坎坷，相當於做了2遍，走了彎路。

第1遍是使用者一選擇圖片，就進行了上傳，然後返回一個地址，所以在彈層上展現的圖片已經是伺服器上的圖片了，然後進行裁切，再儲存。

第2遍找到的一個方法，是在第1遍做到裁切處理時候想到的，即彈層展現的是使用者機器上選擇的圖片，不用先上傳，但是用image/base64來展現的。這樣就與伺服器少了一次互動啊，並且伺服器不用儲存2遍圖片，還提高了彈層展現速度，體驗更好，所以是極好的。

說下碰到的主要技術點：

express架構不用多說，就是儲存的時候post一下裁切後的base64資料，後台寫個對應路由就好。
Jquery也不用多說，頁面展現控制與ajax提交。

HTML5/FileReader/canvas，FileReader用於將檔案讀取為資料,我們使用它的onLoad事件；canvas這個用作裁切移動時，即時重繪裁切後的圖片（相當於即時預覽，當然我是隱藏了，調試的時候可以讓他display），可以隱藏，最後上傳的其實就是這個canvas的base64資料。

Jcrop plugin。這個是裁切外掛程式，必須的了。下載與說明在這裡。
其他就是base64字串儲存成圖片了，這在服務端比較簡單，直接用fs.writeFile(fileName,dataBuffer,function(err){});就好了。

具體代碼

view頁面，主要需要有一個上傳控制項，還有定義彈窗div以及用於重繪裁切範圍圖片的canvas，當然頁面要引用相應的js外掛程式和css等，主要：

<link rel="stylesheet" href="/css/jquery.Jcrop.css" rel="external nofollow" ><script src="/js/jquery.js"></script><script src="/js/jquery.Jcrop.js"></script><!--上傳控制項--><input type="file" name="upLoadImg1" id="upLoadImg1"><!--彈窗與裁切圖--><div class="cover"> <img id="Img1" alt=""> <button id="btnSave">儲存</button></div><!--裁切範圍重繪canvas--><canvas id="myCanva" width="200" height="200">

js/jQuery，處理圖片載入與裁切上傳。

首先要監控上傳控制項的變化，因為我們這裡沒有按鈕來觸發，所以直接監控upLoadImg1的change來觸發。

$('#upLoadImg1').on('change', function() { if (document.getElementById("upLoadImg1").files.length === 0) {  return; } var oFile = document.getElementById("upLoadImg1").files[0]; if (!oFile) {  return; } var fileName = oFile.name; var fileSize = oFile.size; var fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase(); if (fileType != '.jpg' && fileType != '.jpeg' && fileType != '.gif' && fileType != '.png' && fileType != '.bmp') {  alert("請選擇jpg,png,gif,bmp格式的圖片");  return; } if (fileSize > 2 * 1024 * 1024) {  alert('最大支援2MB的圖片');  return; } var fileReader = new FileReader(); fileReader.readAsDataURL(oFile); // 成功讀取 fileReader.onload = function(e) {  // 顯示彈窗  $('.cover').show();  // 將彈窗中的圖片路徑設定為選擇的圖片的base64  $('#Img1').attr('src', e.target.result);  // 裁切組件初始化  initJcrop(); };});

裁切在彈窗一顯示的時候就應該初始化：

function initJcrop() { $('#Img1').Jcrop({  onChange: updateCoords,  onSelect: updateCoords,  aspectRatio: 1,  boxWidth: 300,  boxHeight: 300 }, function() {  //彈窗中顯示的圖片尺寸   var bb = this.getBounds();  var bWidth = Number(bb[0]) / 2;  var bHeight = Number(bb[1]) / 2;  //設定初始選中裁切範圍  this.setSelect([0, 0, bWidth, bHeight]);  //原始圖片縮小比例  try {   wdthScale = $('#Img1')["0"].width / 222;   heightScale = $('#Img1')["0"].height / 238;  } catch (e) {}  jcrop_api = this; });}

非常重要的一個坑是，在此之前要定義全域變數jcrop_api,widthScale和heightScale，2個scale變數用於記錄選擇的原始圖片尺寸與在彈窗上展現尺寸的縮小/放大比例的，比如選擇的是1024x768的圖片，但是彈窗上展現的範圍是222x238，這就需要將縮小的倍數記錄下來，在裁切的重繪canvas的時候要乘以這個倍數，否則裁切的範圍就是在這個222x236尺寸上裁切的，而不是原始圖片的尺寸上裁切的。而前面的jcrop_api變數用於重新選擇圖片時要將上一次的裁切初始化組件destroy掉。

Jcrop組件中重要的事件:onChange和onSelect，用於確定裁切範圍的座標（尺寸），因此也非常重要，其實重繪canvas就是在這裡面完成的。

function updateCoords(c) { var img = document.getElementById('Img1'); var ctx = document.getElementById('myCanva').getContext('2d'); try {  wdthScale = wdthScale === 1 ? $('#Img1')["0"].width / 222 : wdthScale;  heightScale = heightScale === 1 ? $('#Img1')["0"].height / 238 : heightScale; } catch (e) { } //繪製canvas畫布 ctx.drawImage(img, c.x, c.y, c.w * wdthScale, c.h * heightScale, 0, 0, 200, 200);}

另外就是處理儲存按鈕來，一個ajax來提交canvas形成的圖片的base64字串，後台接受儲存就可以了。

 var data = document.getElementById('myCanva').toDataURL(); $.ajax({  url: '/xxxx',  type: 'POST',  dataType: 'JSON',  cache: false,  data: {   'imgData': data  },  success: function(res) {},  error: function(err) {} });

這就是上傳裁切（即時預覽）的全部過程了。

以上所述是小編給大家介紹的node.js（express）中使用Jcrop進行圖片剪下上傳功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！