一个图片裁剪插件，并穿给后端

图片裁剪插件

我们在日常开发中，裁剪图片并上传，是经常出现的需求。前几天，就有一个这样的需求，但是要求比较特殊，于是自己写了一个图片裁剪插件，因为自己写的改起来比较灵活。

其实裁剪图片无非就是:

• 文件选择图片，利用FileReader将文件格式的图片转成base64格式。
• 把这个base64格式显示在页面上，作为原图。
• 可以在原图的上面弄一个剪裁的方框，可以用鼠标来控制大小并移动，我觉得这里是最难的，需要很强的逻辑能力。
• 再利用canvas，以原图为基准，进行画图的裁剪，最后通过canvas方法得到裁剪后的base64格式图片。
• 最后把base64格式的图片转成Blob对象，利用ajax传送给后端。

关键方法

选择图片文件转base64

function file2base64(imgFile, callBack) {
  var fr = new FileReader();
  fr.onload = function() {
    // fr.result就是base64格式数据
    callBack(fr.result);
  }
  fr.readAsDataURL(imgFile);
}

将base64图片转化blob

function base64url2blob(base64url) {
  var binaryString = atob(base64url.split(',')[1]),
        mimeType = base64url.split(',')[0].match(/:(.*?);/)[1],
        length = binaryString.length,
        u8arr = new Uint8Array(length),
        blob;
    while(length--) {
      u8arr[length] = binaryString.charCodeAt(length);
    }
    blob = new Blob([u8arr.buffer], {type: mimeType});
    return blob;
}

将图片转化为blob

function img2blob(nImg, compressVal) {
  // 获取图片原始宽高
  var cloneImg = nImg.cloneNode(true);
  var nCanvas = document.createElement('canvas');
  nCanvas.style.display = 'none';
  document.body.appendChild(nCanvas);
  nCanvas.width = cloneImg.width;
  nCanvas.height = cloneImg.height;
  var ctx = nCanvas.getContext("2d");
  ctx.drawImage(nImg,0,0,cloneImg.width,cloneImg.height);
  var base64Data = nCanvas.toDataURL("image/jpeg", compressVal);
  var blob = this.base64url2blob(base64Data);
  return blob;
}

以上就是几个重要的格式转换方法。
最后，贴出源码demo，里边包含后端接收的nodejs代码。
点这里