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. Ubuntu 16.04 Chrome浏览器安装flash player插件

    1:官网下载插件  flash palyer lash_player_npapi_linux_debug.x86_64.tar.gz 2:解压 提取 libpepflashplayer.so 3:手动 ...

  2. Git日常操作指令

    1. 将本地项目上传到码云: ①. 码云上创建一个项目 ②. 本地文件项目内右键git bash进入git控制台 ③. git init 命令   -- 会在本地创建一个.git文件夹 ④. git ...

  3. JAVA关于byte数组与String转换的问题

    1 public class ToString{ public static void main(String[] args){ String aa = "hellow"; byt ...

  4. 洛谷——P1428 小鱼比可爱

    https://www.luogu.org/problem/show?pid=1428 题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个“比可爱”比赛,比的是每只鱼的可爱程度.参赛的鱼被从 ...

  5. Redhat 6配置本地Yum源

    注明:我的方法适用于iso镜像(光盘或光盘镜像:iso9660) 1.挂载(mount) 其它的mount方法可參见此链接 http://www.jb51.net/os/RedHat/1109.htm ...

  6. 逆向project第003篇:跨越CM4验证机制的鸿沟(上)

    一.前言 <冠军足球经理>系列作为一款拟真度极高的足球经营类游戏.赢得过无数赞誉,而CM4可以说是这个传奇的起点. 可是在游戏安装过程中.当用户输入完序列号之后.程序并不会对用户的输入进行 ...

  7. 85.Mongoose指南 - Schema

    转自:https://www.bbsmax.com/A/pRdBnKpPdn/ 定义schema 用mongoose的第一件事情就应该是定义schema. schema是什么呢? 它类似于关系数据库的 ...

  8. Linux-php7安装redis

    Linux-php7安装redis 标签(空格分隔): 未分类 安装redis服务 1 下载redis cd /usr/local/ 进入安装目录 wget http://download.redis ...

  9. BZOJ 1588 平衡树 模板题

    Treap: //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int si ...

  10. P2264 情书(字符串hash90分)

    题目背景 一封好的情书需要撰写人全身心的投入.lin_toto同学看上了可爱的卡速米想对她表白,但却不知道自己写的情书是否能感动她,现在他带着情书请你来帮助他. 题目描述 为了帮助lin_toto,我 ...