js插件---图片裁剪photoClip

一、总结

一句话总结：页面裁剪图片得到base64格式的图片数据，然后把这个数据通过ajax上传给服务器，服务器将base64图片数据解析成图片并且保存到服务器上面，并且返回图片在服务器上的地址。

二、图片裁剪photoClip

1、截图

 

2、代码（代码需要放到web服务器里面，因为带了裁剪后图片上传服务器的功能）

百度盘下载链接：链接：https://pan.baidu.com/s/1-kZzwmIvtwLpGA8GrhVHPA 密码：oj8u

裁剪页面代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="utf-8">
  6.          <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.          <meta name="renderer" content="webkit">
  8.          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  9.          <meta http-equiv="Cache-Control" content="no-siteapp" />
  10.          <title>裁剪图片演示-带初始值</title>
  11.          <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css" />
  12.          <style type="text/css">
  13.              #clip {
  14.                  width: 100%;
  15.                  height: 400px;
  16.              }
  17.          </style>
  18.      </head>
  19.  
  20.      <body>
  21.          <div id="clip"></div>
  22.  
  23.          <div class="am-margin-sm">
  24.              <button type="button" class="am-btn am-btn-primary" id="toggle-file">上传头像</button>
  25.              <button type="button" class="am-btn am-btn-primary" id="clipBtn">裁剪</button>
  26.          </div>
  27.  
  28.          <input class="am-hide" type="file" id="file">
  29.  
  30.          <img class="am-img-circle" id="img-view"/>
  31.  
  32.          <script src="../dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  33.          <script src="../dist/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script>
  34.          <script src="../dist/hammer.min.js" type="text/javascript" charset="utf-8"></script>
  35.          <script src="../dist/photoClip.min.js" type="text/javascript" charset="utf-8"></script>
  36.          <script>
  37.              $(function() {
  38.                  var $clip = $("#clip");
  39.                  var $file = $("#file");
  40.                  $("#toggle-file").click(function() {
  41.                      $file.trigger("click");
  42.                  });
  43.  
  44.                  $clip.photoClip({
  45.                      width: 400,
  46.                      height: 300,
  47.                      fileMinSize: 20,
  48.                      file: $file,
  49.                      defaultImg: "../img/4.jpg",
  50.                      ok: "#clipBtn",
  51.                      loadStart: function() {
  52.                          console.log("照片读取中");
  53.                      },
  54.                      loadProgress: function(progress) {
  55.                          console.log(progress);
  56.                      },
  57.                      loadError: function() {
  58.                          console.log("图片加载失败");
  59.                      },
  60.                      loadComplete: function() {
  61.                          console.log("照片读取完成");
  62.                      },
  63.                      imgSizeMin: function(kbs) {
  64.                          console.log(kbs, "上传图片过小");
  65.                      },
  66.                      clipFinish: function(dataURL) {
  67.                          document.getElementById("img-view").src = dataURL;
  68.  
  69.                          $.post("index.php", { dataURL: dataURL},
  70.                            function(data){
  71.                            alert("Data Loaded: " + data);
  72.                            });
  73.                          console.log(dataURL);
  74.                      }
  75.                  });
  76.              })
  77.          </script>
  78.  
  79.      </body>
  80.  </html>

后台接收并处理图片代码

  1.  <?php
  2.  //print_r($_POST);
  3.  $base_img=$_POST['dataURL'];
  4.  // $base_img是获取到前端传递的值
  5.  $base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
  6.  //  设置文件路径和命名文件名称
  7.  $path = "./";
  8.  $output_file = time().rand(100,999).'.jpeg';
  9.  $path = $path.$output_file;
  10.  //  创建将数据流文件写入我们创建的文件内容中
  11.   file_put_contents($path, base64_decode($base_img));
  12.  // 输出文件
  13.  print_r($output_file);
  14.    ?>
 

js插件---图片裁剪photoClip的更多相关文章

  1. js插件---图片裁剪cropImgBox（适合练习编写插件之用）

    js插件---图片裁剪cropImgBox(适合练习编写插件之用) 一.总结 一句话总结:无论是灰度还是高对比度的图片,都是先处理canvas的像素,使其变成灰度或者高对比度,然后再用canvas.t ...

  2. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  3. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  4. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  5. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  6. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  7. js插件-图片椭圆轮播效果

    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...

  8. H5项目 使用Cropper.js 实现图片 裁剪 操作 (APP端)

    参考地址: 1.https://www.jianshu.com/p/b252a7cbcf0b 2.https://blog.csdn.net/weixin_38023551/article/detai ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. 浏览器解析，HTTP/HTTPS、TCP/IP、WebSocket协议

    浏览器相关 浏览器对同一个域名有连接数限制,大部分是 6. 浏览器指的是 Chrome.Firefox,而浏览器内核则是 Blink.Gecko,浏览器内核只负责渲染,GUI 及网络连接等跨平台工作则 ...

  2. luogu P3674 小清新人渣的本愿（莫队+bitset)

    这题是莫队维护bitset. 然而我并不会bitset以前讲过认为不考就没学 我真的太菜了. 首先维护一个权值的bitset--s. 操作3比较简单,我们可以\(\sqrt{x}\)枚举约数然后判断就 ...

  3. 计数排序（counting-sort）

    计数排序是一种稳定的排序算法,它不是比较排序.计数排序是有条件限制的:排序的数必须是n个0到k的数,所以计数排序不适合给字母排序.计数排序时间复杂度:O(n+k),空间复杂度:O(k),当k=n时,时 ...

  4. useradd: cannot open /etc/passwd

    [root@ftp ~]# useradd -g ftp -s/sbin/nologin liwmuseradd: cannot open /etc/passwd [root@ftp ~]# user ...

  5. Python: Json串反序列化为自定义类对象

    最近刚接触到python,就想到了如何反序列化json串.网上找了一下,大部分都是用json模块反序列化为python数据结构(字典和列表).如果对json模块不了解的参考菜鸟教程.然后我在此基础上将 ...

  6. P1064 金明的预算方案 （依赖性背包问题）

    这道题可以用分组背包来做. 但是分组有两种方式 一种是把主件,主件+附件1,主件+附件2分成一组 组内只能选一个物品 一种是建一颗树,用树形dp的方式去做 第二种更通用,就算物品的依赖关系是森林都可以 ...

  7. 题解 洛谷 P3376 【【模板】网络最大流】

    本人很弱,只会Dinic.EK与Ford-Fulkerson...(正在学习ISAP...) 这里讲Dinic... Dinic:与Ford-Fulkerson和的思路相似(话说好像最大流求解都差不多 ...

  8. 【图灵杯 J】简单的变位词

    Description 变位词是指改变某个词的字母顺序后构成的新词.蔡老板最近沉迷研究变位词并给你扔了一道题: 给你一些单词,让你把里面的变位词分组找出来.互为变位词的归为一组,最后输出含有变位词最多 ...

  9. mysql给某字段随机赋特定范围的整数值

    [引] mysql中随机生成一些范围内的整数有时候是很有用的,用到了2个函数 1.floor(f) 返回一个不大于f的最大整数 2.rand(),rand(n) 返回一个随机浮点值 v ,范围在 0  ...

  10. Linux下安装过程中编译PHP时报错：configure: error: libjpeg.(a|so) not found

    在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决的方法: 检查之后发现已经安装libjpeg.可是/usr/l ...