• 前端裁切图片插件之cropper介绍


      给大家介绍一个前端非常实用的依赖于jquery的图片裁切插件cropper.

      因为前端无法做到图片的裁切,所以实际中需要用cropper和后台的GraphicsMagick相互配合.

      先贴上cropper的网址https://fengyuanchen.github.io/cropperjs/和github地址:https://github.com/fengyuanchen/cropper 

      第一步:下载cropper:

      

    npm install cropper.

      第二部:引入依赖包和插件包:

      

    <script src="/path/to/jquery.js"></script><!-- jQuery is required -->
    <link  href="/path/to/cropper.css" rel="stylesheet">
    <script src="/path/to/cropper.js"></script>

      第三部:在js中调用方法:

    $('#image').cropper({
      aspectRatio: 16 / 9,
      crop: function(e) {
        // Output the result data for cropping image.
        console.log(e.x);
        console.log(e.y);
        console.log(e.width);
        console.log(e.height);
        console.log(e.rotate);
        console.log(e.scaleX);
        console.log(e.scaleY);
      }
    });

      其中aspectRatio 是指图片的长宽比

      只需要将x,y,width,height,rotate,scaleX,scaleY这些数据传给后台,后台就可以根据数据进行图片的裁切.

      使用cropper要注意一点,这个插件会在dom中构建一些标签,所以在图片展示的时候多注意:

      

      

    用IE6的以后吃方便面都没有调料包!!!
  • 相关阅读:
    学习进度报告2021/4/5
    学习进度报告2021/4/4
    学习进度报告2021/4/3
    学习进度报告2021/4/2
    学习进度报告2021/4/1
    学习进度报告2021/3/31
    《学会提问》读书笔记3
    学习进度报告2021/3/30
    MySQL入门——如何进行主从配置
    MySQL入门详解——事务、锁、优化
  • 原文地址:https://www.cnblogs.com/H5C3XXN/p/6275758.html
Copyright © 2020-2023  润新知