關於Copper.js的簡單使用方法

本文轉載自查看原文 2020-10-08 22:07 604 JavaScript

copper的官方教程 https://github.com/fengyuanchen/cropperjs

環境的搭建

使用copper時應首先將cropper.js和cropper.css引入工程，這兩個文件均可在其官方教程中找到。

配置

copper中有很多配置選項為用戶提供使用，本文所使用的配置較為簡單，使用aspectRatio屬性配置裁剪區域的比例，在crop函數展示裁剪后的圖片。

var options = {
            aspectRatio: 16 / 9,
            crop(event) {
                const canvas = this.cropper.getCroppedCanvas();
                $("#corppedImage").attr("src", canvas.toDataURL("image/png"));
            }
};

學習環境的整體構建

學習代碼主要是將上傳的圖片進行裁剪，並將裁剪后的圖片展示在裁剪區域下方。

<!DOCTYPE html>
<html>
    <head>
        <title>cropper</title>
        <link type="text/css" rel="stylesheet" href="resource/cropper.min.css">
        <script src="resource/jquery.min.js"></script>
        <script type="text/javascript"  src="resource/cropper.min.js" ></script>
        <script type="text/javascript"  src="resource/index.js" ></script>
    </head>
    <body>
        <div><input id="img-file" type="file"/></div>
        <div id="uploadedImage"></div>
        <div><img id="corppedImage" src=""></div>
    </body>
</html>

(function(){
    var uploadedImageURL;
    var cropper = null;
    var options = {
            aspectRatio: 16 / 9,
            crop(event) {
                const canvas = this.cropper.getCroppedCanvas();
                $("#corppedImage").attr("src", canvas.toDataURL("image/png"));
            }
    };

    function getImage() { 
        var files = this.files;
        var file;
        
        if (files && files.length) { 
            file = files[0];
        }
        
        if (/^image\/\w+/.test(file.type)) {

         if (uploadedImageURL) {
           URL.revokeObjectURL(uploadedImageURL);
         }

         if (cropper) {
           cropper.destroy();
         }
         
         var newImg = new Image();
          newImg.src = uploadedImageURL = URL.createObjectURL(file);
          newImg.id = "myGreatImage";
          $("#uploadedImage").append(newImg);
          cropper = new Cropper(newImg, options);
       } else {
         window.alert('Please choose an image file.');
       }
       $("#img-file").val('');
   }

   $(document).ready(function() {
       $("#img-file").bind("change", getImage);
   });
})()

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 mock js使用方法簡單記錄 JS使用方法 JavaScript模板引擎template.js簡單的使用方法 iscroll.js的簡單使用方法（總結） swfobject.js 2.2簡單使用方法 gson的簡單使用方法 SDWebImage 的簡單使用方法 Servlet簡單的使用方法 Fastjson簡單使用方法 __doPostBack簡單的使用方法