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插件图片裁剪photoClip相关推荐

Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
详情请查看http://aehyok.com/Blog/Detail/32.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
JavaScript实战练习——图片裁剪
源码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
图片裁剪：CropZoom插件的应用
我们在使用QQ空间或者开心网等网站的个人中心时,有个上传个人头像的功能.用户在上传自己的照片后,由于照片尺寸不符合网站的要求,要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像. 查看演示最近在 ...
jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定支持 ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)
插件描述:移动端头像上传,支撑头像预览和放大缩小平移,内置上传至后端请求方法. 注:请在移动端用手势查看缩放效果,PC端无法缩放 Mavatar 移动端头像上传,支撑头像预览和放大缩小平移,内置上传至 ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...

JavaScript插件图片裁剪photoClip

阅读目录

JavaScript插件图片裁剪 photoClip

1、截图

2、代码

后台接收并处理图片代码

JavaScript插件图片裁剪photoClip相关推荐

最新文章

热门文章

JavaScript插件 图片裁剪photoClip

阅读目录

JavaScript插件图片裁剪 photoClip

1、截图

2、代码

后台接收并处理图片代码

JavaScript插件 图片裁剪photoClip相关推荐

最新文章

热门文章

JavaScript插件图片裁剪photoClip

JavaScript插件图片裁剪photoClip相关推荐