<!DOCTYPE html>

<html>

  <head>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/croppie/2.6.2/croppie.js"></script>

    <link rel="Stylesheet" href="https://cdn.bootcss.com/croppie/2.6.2/croppie.css" />

    <style>

      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;

}

.pop_main{display:none}

.pop_con{    width: 400px;

    height: 400px;

    background: #fff;

    z-index: 100;

    position: relative;}

.pop_mask{background-color: rgba(0, 0, 0, 0.5);position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    bottom: 0;}

    </style>

  </head>

  <body>

    <div class="actions">

      <button class="file-btn">

       <span>上传</span>

       <input type="file" id="upload" value="选择图片文件" />

      </button> 

      <div class="pop_main">

        <div class="pop_con">

          <div> <button class="pop_close">x</button> </div>

          <div class="crop">

            <div id="upload-demo"></div>

            <button class="upload-result">裁剪</button>

          </div>

        </div>

      <div class="pop_mask"></div>

      </div>

      <div id="result"></div>

     </div>

     <script>

       $(function(){

 var $uploadCrop; 

  function readFile(input) {

    if (input.files && input.files[0]) {

      console.log("file----",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 () {

   $(".pop_main").show();

   $(".pop_con").css({'top':0,'opacity':0})

   $(".pop_con").animate({'top':'50%','opacity':1})

   readFile(this);

  });

  $('.upload-result').on('click', function (ev) {

   $uploadCrop.croppie('result', 'canvas').then(function (resp) {

     console.log("file---2",resp)

    popupResult({

     src: resp

    });

   });

  });

  $('.pop_close').on('click',function(ev){

    $(".pop_main").hide()

    var file = $("#upload")

file.after(file.clone().val(""));

file.remove();

  })

 function popupResult(result) { 

  var html;

  if (result.html) {

   html = result.html;

  }

  if (result.src) {

   html = '<img src="' + result.src + '" />';

  }

  $("#result").html(html);

 }

});

     </script>

  </body>

</html>

　　

剪裁圆形图片cropie的更多相关文章

  1. ios---剪裁圆形图片方法

    剪裁圆形图片 - (instancetype)xmg_circleImage { // 1.开启图形上下文 // 比例因素:当前点与像素比例 UIGraphicsBeginImageContextWi ...

  2. WindowsPhone8中实现圆形图片的生成显示

    原文 WindowsPhone8中实现圆形图片的生成显示 很多软件中(比如QQ)用到了许多圆形图片,作为用户头像等等,原始图片往往是方形的,那么怎么样将方形的图片显示成圆形呢? 一种方法是当背景为固定 ...

  3. Android 自定义圆形图片 CircleImageView

    1.效果预览 1.1.布局中写自定义圆形图片的路径即可 1.2.然后看一看图片效果 1.3.原图是这样的 @mipmap/ic_launcher 2.使用过程 2.1.CircleImageView源 ...

  4. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  5. Glide实现圆角和圆形图片

    实现圆形图片 , 传参第一个为上下文, 第二个为角度 package com.hh.beauter.util; import android.content.Context; import andro ...

  6. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  7. Android实现圆形图片

     情景再现: 写Android程序也有一段时间了,今天突然被问怎么实现一个圆形图片,很多app图像是圆形的.但是用户上传的图像可不是圆的,所以问题就来了,需要我们代码实现圆形图片.但是大脑飞转想到第三 ...

  8. UIImage类扩展返回一个带边框的圆形图片

    /** * 将image转换为圆型带边框的图片(最好写一个UIImage的类扩展) * * @param name 图片的名字 * @param borderWidth 外层边框的宽度 * @para ...

  9. Android_AsyncTaskDemo之QQ记步数（画圆形图片知识）

    今天学习了AsyncTask Android 的异步机制.我简单的实现我的一个小小案例--qq记步数.然后穿插一个画圆形图片的知识点. 由于所学知识有限,目前我计数,还有排名等等我就简单的利用随机数实 ...

  10. android通过Canvas和Paint截取无锯齿圆形图片

    一个通过Canvas和Paint截取无锯齿圆形图片. /** * 根据原图和变长绘制圆形图片 * * @param source * @param min * @return */ public st ...

随机推荐

  1. LP1-5:接口测试方法

  2. 各版本JDK及镜像仓库

    Adoptium Marketplace 毕昇(华为) Dragonwell(阿里) Tencent Kona OpenJDK OracleJDK RedHatOpenJDK Temurin(ecli ...

  3. LWC-002_Composition

    Composition (lwc.dev) Set a Property on a Child Component # Send an Event from a Child to an Owner   ...

  4. @click，@click.native失效问题（原生js代码innerHTML中填充vue页面，页面中点击事件失效）

    解决方式: window.mapVue = this <input onclick="window.mapVue.locusPath()" type="button ...

  5. vue封装组件

    父组件 <template> <view> <assembly @submitToParent="submitToParent"> <te ...

  6. Unity简单使用 Addressables远端打包流程

    跟着一步步操作即可 1.先打开一个unity项目 2.导入插件资源包地址,点击如图片所示 3.最后点击导入就行了也就是第三步 Install 4.这是在点击 Window 安装后Window/多了一个 ...

  7. MongoDB 6.0.4 安装记录

    须知:版本号x.y.z,看y:偶数版为稳定版,奇数版为开发版 (1)下载zip,解压 1 https://fastdl.mongodb.org/windows/mongodb-windows-x86_ ...

  8. 分享至： 日本神話の考古学.PDF

    书本详情 日本神話の考古学 种类:Languages - General & Miscellaneous Languages - Reference年:1993出版社:朝日新聞社语言:japa ...

  9. Docker技术知识点总纲

    基本介绍的安装使用 1.Docker简要介绍 2.windows下Docker的安装 3.CentOS下Docker的安装 快速入门与常用操作 4.Docker引擎升级与存储驱动的升级 5.Docke ...

  10. 小白之Python-基础中的基础04

    继续.. ------------------------华丽的分界线----------------------------- Python-基础中的基础04 --之方法 格式:对象.方法() 1. ...