jQuery melaksanakan muat naik imej dan palam pemangkasan Croppie_jquery

Dalam banyak aplikasi, anda perlu memuat naik imej tempatan dan kemudian memangkasnya dengan sewajarnya untuk memenuhi keperluan saiz imej tapak web. Yang paling biasa ialah aplikasi di mana setiap sistem pengguna memerlukan pengguna untuk memuat naik dan memangkas avatar. Hari ini saya akan memperkenalkan kepada anda pemalam muat naik dan pemangkasan imej berdasarkan HTML5 dan jQuery, ia dipanggil Croppie.

Pemarahan operasi:

HTML
Mula-mula kita memuatkan fail js dan css yang berkaitan ke dalam kepala.

<script src="jquery.min.js"></script> 
<script src="croppie.min.js"></script> 
<link rel="stylesheet" href="croppie.css"> 

Seterusnya kami meletakkan butang muat naik imej pada halaman Kami boleh menggunakan CSS untuk menukar kawalan pemilihan fail jenis="fail" kepada gaya butang. Selepas memilih imej, muat naik imej dan panggil pemalam pemangkasan Croppie dalam #upload-demo. #result digunakan untuk memaparkan imej yang dipangkas.

<div class="actions"> 
  <button class="file-btn"> 
    <span>上传</span> 
    <input type="file" id="upload" value="选择图片文件" /> 
  </button> 
  <div class="crop"> 
    <div id="upload-demo"></div> 
    <button class="upload-result">裁剪</button> 
  </div> 
  <div id="result"></div> 
</div> 

CSS
Menggunakan kod CSS berikut, kami menukar kawalan pemilihan fail dengan sempurna kepada gaya butang Malah, kami menetapkan ketelusan jenis="fail" kepada 0, dan kemudian bertindih dengan butang. Di samping itu, kami mula-mula menetapkan kawasan pemangkasan imej .crop kepada tidak kelihatan dan kemudian memaparkannya selepas memilih fail.

button, 
a.btn { 
  background-color: #189094; 
  color: white; 
  padding: 10px 15px; 
  border-radius: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.5); 
  font-size: 16px; 
  cursor: pointer; 
  text-decoration: none; 
  text-shadow: none; 
} 
button:focus { 
  outline: 0; 
} 
 
.file-btn { 
  position: relative; 
} 
.file-btn input[type="file"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
} 
 
.actions { 
  padding: 5px 0; 
} 
.actions button { 
  margin-right: 5px; 
} 
.crop{display:none} 

jQuery
Mula-mula, API FileReader HTML5 digunakan untuk membaca fail setempat, dan kemudian $('#upload-demo').croppie() memanggil pemalam Croppie. Port pandangan pilihan Croppie: Anda boleh menetapkan lebar dan ketinggian imej yang dipangkas, serta jenis (bulatan atau segi empat sama), sempadan pilihan ialah saiz persisian imej. Ia juga mempunyai parameter mouseWheelZoom: sama ada untuk menyokong pengezum roda tetikus bagi imej showZoom: sama ada untuk memaparkan kemas kini bar zum: fungsi panggil balik;

$(function(){ 
  var $uploadCrop; 
 
    function readFile(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
         
        reader.onload = function (e) { 
          $uploadCrop.croppie('bind', { 
            url: e.target.result 
          }); 
        } 
         
        reader.readAsDataURL(input.files[0]); 
      } 
      else { 
        alert("Sorry - you're browser doesn't support the FileReader API"); 
      } 
    } 
 
    $uploadCrop = $('#upload-demo').croppie({ 
      viewport: { 
        width: 200, 
        height: 200, 
        type: 'circle' 
      }, 
      boundary: { 
        width: 300, 
        height: 300 
      } 
    }); 
 
    $('#upload').on('change', function () { 
      $(".crop").show(); 
      readFile(this); 
    }); 
    $('.upload-result').on('click', function (ev) { 
      $uploadCrop.croppie('result', 'canvas').then(function (resp) { 
        popupResult({ 
          src: resp 
        }); 
      }); 
    }); 
     
  function popupResult(result) { 
    var html; 
    if (result.html) { 
      html = result.html; 
    } 
    if (result.src) { 
      html = '<img src="' + result.src + '" />'; 
    } 
    $("#result").html(html); 
  } 
}); 

Selepas mengklik butang "Pangkas", panggil kaedah hasil Croppie sekali lagi untuk mengembalikan gambar yang dipangkas dan memaparkannya dalam #hasil.

Di atas adalah proses utama jQuery melaksanakan muat naik dan memotong imej. Saya harap ia akan membantu semua orang untuk mempelajari teknologi muat naik dan pemangkasan imej.