JavaScript插件 图片裁剪photoClip
JavaScript插件 图片 裁剪
2023-09-11 14:14:56 时间
JavaScript插件图片裁剪 photoClip
页面裁剪图片得到 base64 格式的图片数据,然后把这个数据通过 ajax 上传给服务器,服务器将 base64 图片数据解析成图片并且保存到服务器上面,并且返回图片在服务器上的地址。
1、截图
2、代码
源码:https://download.csdn.net/download/weiguang102/85117408
<!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("http://tt.cc/testData/A.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);
相关文章
- [转] 为什么javascript是单线程的却能让AJAX异步调用?
- 用JavaScript(js)对时间格式化
- 26dwr - DWR中的JavaScript(创造一个与 Java 对象匹配的 Javascript 对象)
- 详解JavaScript中的this
- 【JavaScript】Javascript中的函数声明和函数表达式
- 【JavaScript】Understanding callback functions in Javascript
- JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
- 第60节:Java中的JavaScript技术
- JavaScript数据类型转换
- object in javascript
- FusionCharts JavaScript API - Events 全局事件处理
- 《JavaScript入门经典(第6版)》——2.4 操作符
- 《jQuery Mobile入门经典》—— 2.3 使用JavaScript完成功能
- 初识JavaScript,Ajax,jQuery,并比较三者关系
- JavaScript 中 9个需要掌握基础的问题
- DOM元素遍历(javascript)
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题 博客分类: IE火狐、谷歌javascript
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
- JavaScript数组与字符串常用方法总结
- Fundebug JavaScript插件支持监控HTTP请求数据
- JavaScript是如何工作的:引擎,运行时和调用堆栈的概述!
- 华为OD机试 - 洞穴探险(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 华为OD机试 - 拼接URL(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 【原生JS组件】javascript 运动框架
- 【javascript】Javascript中"||"的妙用
- JavaScript 带粒子效果的进度条