js插件---图片裁剪photoClip
js插件---图片裁剪photoClip
一、总结
一句话总结:页面裁剪图片得到base64格式的图片数据,然后把这个数据通过ajax上传给服务器,服务器将base64图片数据解析成图片并且保存到服务器上面,并且返回图片在服务器上的地址。
二、图片裁剪photoClip
1、截图
2、代码(代码需要放到web服务器里面,因为带了裁剪后图片上传服务器的功能)
百度盘下载链接:链接:https://pan.baidu.com/s/1-kZzwmIvtwLpGA8GrhVHPA 密码:oj8u
裁剪页面代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <meta http-equiv="Cache-Control" content="no-siteapp" />
- <title>裁剪图片演示-带初始值</title>
- <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css" />
- <style type="text/css">
- #clip {
- width: 100%;
- height: 400px;
- }
- </style>
- </head>
- <body>
- <div id="clip"></div>
- <div class="am-margin-sm">
- <button type="button" class="am-btn am-btn-primary" id="toggle-file">上传头像</button>
- <button type="button" class="am-btn am-btn-primary" id="clipBtn">裁剪</button>
- </div>
- <input class="am-hide" type="file" id="file">
- <img class="am-img-circle" id="img-view"/>
- <script src="../dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../dist/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../dist/hammer.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../dist/photoClip.min.js" type="text/javascript" charset="utf-8"></script>
- <script>
- $(function() {
- var $clip = $("#clip");
- var $file = $("#file");
- $("#toggle-file").click(function() {
- $file.trigger("click");
- });
- $clip.photoClip({
- width: 400,
- height: 300,
- fileMinSize: 20,
- file: $file,
- defaultImg: "../img/4.jpg",
- ok: "#clipBtn",
- loadStart: function() {
- console.log("照片读取中");
- },
- loadProgress: function(progress) {
- console.log(progress);
- },
- loadError: function() {
- console.log("图片加载失败");
- },
- loadComplete: function() {
- console.log("照片读取完成");
- },
- imgSizeMin: function(kbs) {
- console.log(kbs, "上传图片过小");
- },
- clipFinish: function(dataURL) {
- document.getElementById("img-view").src = dataURL;
- $.post("index.php", { dataURL: dataURL},
- function(data){
- alert("Data Loaded: " + data);
- });
- console.log(dataURL);
- }
- });
- })
- </script>
- </body>
- </html>
后台接收并处理图片代码
- <?php
- //print_r($_POST);
- $base_img=$_POST['dataURL'];
- // $base_img是获取到前端传递的值
- $base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
- // 设置文件路径和命名文件名称
- $path = "./";
- $output_file = time().rand(100,999).'.jpeg';
- $path = $path.$output_file;
- // 创建将数据流文件写入我们创建的文件内容中
- file_put_contents($path, base64_decode($base_img));
- // 输出文件
- print_r($output_file);
- ?>
js插件---图片裁剪photoClip的更多相关文章
- js插件---图片裁剪cropImgBox(适合练习编写插件之用)
js插件---图片裁剪cropImgBox(适合练习编写插件之用) 一.总结 一句话总结:无论是灰度还是高对比度的图片,都是先处理canvas的像素,使其变成灰度或者高对比度,然后再用canvas.t ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- smartcrop.js智能图片裁剪库
今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...
- js插件-图片椭圆轮播效果
插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...
- H5项目 使用Cropper.js 实现图片 裁剪 操作 (APP端)
参考地址: 1.https://www.jianshu.com/p/b252a7cbcf0b 2.https://blog.csdn.net/weixin_38023551/article/detai ...
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
随机推荐
- C#获取实例运行时间StopWatch类
在程序运行时有时需要获取某一步骤的操作时间,C#提供的StopWatch类可以很方便的实现这一目的. StopWatch sw=new StopWatch(); sw.Start(); //Do So ...
- 3步简单实现SSH无密码登录
下面简单的做下实验: 一:准备2台服务器: 192.168.10.101 2 192.168.10.102 二:关键字解释 ssh-keygen : 产生公钥与私钥对 ssh-copy-id :将本 ...
- 微信小程序的开启授权,当单机取消授权后 再次授权
//单机去搜索 toSearch:function(){ this.getLocation(res => { console.log('成功') wx.navigateTo({ url: `.. ...
- 超简单入门Vuex小示例
写在前面 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例. 学习vuex需要你知道vue的一些基础知识和用法.相信点开本文的同学都具备 ...
- HNU 13108 Just Another Knapsack Problem DP + Trie树优化
题意: 给你一个文本串,和一些模式串,每个模式串都有一个价值,让你选一些模式串来组成文本串,使获得的价值最大.每个模式串不止能用一次. 思路: 多重背包,枚举文本串的每个位置和模式串,把该模式串拼接在 ...
- 2015 Multi-University Training Contest 3 hdu 5326 Work
Work Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- The Karplus-Strong Algorithm
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/48730857 Karplus-Stro ...
- github git.exe位置
C:\Users\yourname\AppData\Local\GitHub\PortableGit_69703d1db91577f4c666e767a6ca5ec50a48d243\bin\git. ...
- tomcat:Could not publish to the server. java.lang.IndexOutOfBoundsException
1.将工程加入到tomcat,报上述错误 2. run--maven build 报jar包错误: invalid LOC header (bad signature) 3.根据提示找到上述jar包, ...
- hdu1864/2844/2159 背包基础题
hdu1864 01背包 题目链接 题目大意:一堆数,找到一个最大的和满足这个和不超过Q要学会分析复杂度! #include <cstdio> #include <cstring&g ...