关于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简单的使用方法