搜索js圖像裁剪插件沒有jquery

Question

我想要能夠選擇一個圖像，並在網站上裁剪它後，特殊的點擊圖像的選定區域應該作爲bas64上傳到服務器。

上傳應該沒有問題，但是找到一個不帶jQuery或者角色的好插件似乎非常耗時。

我只是看到複式插件，可以做我想做的事情，但需要的角度 https://github.com/alexk111/ngImgCrop

而且我發現http://www.croppic.net/，但是這確實需要的jQuery，其他許多。

有沒有人知道好的剪裁插件，沒有其他圖書館的要求？我不想通過自己編寫插件重新發明輪子。

感謝

Answer 1

我發現了完美的插件沒有jquery的要求，它的名稱croppie。 演示： http://foliotek.github.io/Croppie/ 來源： https://github.com/Foliotek/Croppie

希望這可以幫助別人的未來。

Answer 2

你聽說過microjs？那是一個開始尋找它的好地方。

經過快速搜索，我找到了imago.js，查看它的example。我希望它能幫助你。

Answer 3

我剛剛在一個項目上使用了cropperjs（https://fengyuanchen.github.io/cropperjs/），並且非常滿意。它不使用jQuery。

這裏有一對夫婦的功能我寫信給初始化栽跟頭，然後得到裁剪後的圖像：

function initCropper() { 
    // create blob url from file object 
    vm.selectedImage.dataUrl = URL.createObjectURL(vm.selectedImage); 

    $timeout(function() { 
     // initialise cropper 
     var image = document.getElementById(vm.modalId + '-image'); 
     vm.cropper = new Cropper(image, { 
      aspectRatio: $scope.width/$scope.height, 
      minContainerHeight: Number($scope.height) + 200, 
      guides: false, 
      cropBoxResizable: false, 
      cropBoxMovable: false, 
      zoomable: true, 
      dragMode: 'move', 
      toggleDragModeOnDblclick: false, 
      checkOrientation: false, 
      responsive: false, 
      built: function() { 
       // revoke blob url after cropper is built 
       URL.revokeObjectURL(vm.selectedImage.dataUrl); 
      } 
     }); 
    }); 
} 

function cropImage() { 
    // get cropped image and pass to output file 
    vm.cropper 
     .getCroppedCanvas({ width: $scope.width, height: $scope.height }) 
     .toBlob(function (croppedImage) { 
      $timeout(function() { 
       croppedImage.name = vm.selectedImage.name; 
       vm.croppedImage = croppedImage; 
       vm.croppedImage.dataUrl = URL.createObjectURL(croppedImage); 
       $scope.outputFile = vm.croppedImage; 

       // destroy cropper 
       vm.cropper.destroy(); 
       vm.cropper = null; 
       vm.selectedImage = null; 
      }); 
     }, 'image/jpeg'); 
} 

的功能是從一個角度指令，它就是爲什麼有到$範圍，$超時和VM引用，但角度不是必需的。