演示效果请看本站的个人中心头像上传

前端代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>图像裁剪-Jcrop</title>

</head>

<body>

<div class="reHeaderImg">

<div class="form-group">

<div class="image-editor">

<input type="file" id="cropit-image-input" onchange="imgChange(this)">

<div style="overflow:hidden">

<div class="cropit-preview"></div>

<form class="form-horizontal" style="float:right" role="form" method="post" onsubmit="return validate();"

action="${pageContext.request.contextPath }/business/product/add.action">

<div class="form-group namediv">

<label class="col-sm-2" for="name" style="font-size: 15px;"></label>

<div class="col-sm-6">

<div style="width: 100px; height: 100px; border: 1px solid black; overflow:hidden">

<canvas id="oldConvas" width="100px" height="100px"></canvas>

</div>

</form>

</div>

<form action="{:U('User/changePic')}" method="post" id="picSubmit" onsubmit="return checkCoords();">

<input type="hidden" id="x" name="x" />

<input type="hidden" id="y" name="y" />

<input type="hidden" id="w" name="w" />

<input type="hidden" id="h" name="h" />

<input type="hidden" class="photoStream" id="photoStream" name="photoStream" />

</form>

</div>

<div class="form-group">

<button class="btn btn-sm btn-white" onclick='reHeaderImg_submit(this,"{$_SESSION['mid']}")' type="button">确认修改</button>

</div>

<script type="text/javascript" src=" http://www.no-if.com/Public/Index/js/jquery.js"></script>

<script type="text/javascript" src=" http://www.no-if.com/Public/Index/js/pic_cut/js/jquery.Jcrop.min.js"></script>

<script type="text/javascript">

function cropbox(url){

$('#cropbox').Jcrop({

// start off with jcrop-light class

bgOpacity: 0.5,

bgColor: '#000',

addClass: 'jcrop-normal',

allowResize: 'false',

aspectRatio: 1,

onSelect: updateCoords,

onChange: updateCoords

},function(){

api = this;

api.setSelect([0,0,0+100,0+100]);

api.setOptions({ bgFade: true });

api.ui.selection.addClass('jcrop-selection');

});

}

function updateCoords(c)

{

$('#x').val(c.x);

$('#y').val(c.y);

$('#w').val(c.w);

$('#h').val(c.h);

//更新canvas画板内容

var img=document.getElementById("cropbox");

var ct=document.getElementById("oldConvas");

var ctx=ct.getContext("2d");

//清空画板

ctx.clearRect(0,0, ct.width, ct.height);

//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，

//绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);

ctx.drawImage(img, c.x, c.y, c.w, c.h,0,0,100,100); // 画出图片，尺寸100x100

var newImg = ct.toDataURL("image/jpeg"); // 获得图片流

$(".photoStream").val(newImg); // 将图片字符流存储在input中

// layer.closeAll(); // 关闭所有窗口

};

function checkCoords()

{

if (parseInt($('#w').val())) return true;

alert('Please select a crop region then press submit.');

return false;

};

function imgChange(e){

var url = window.URL.createObjectURL(document.getElementById('cropit-image-input').files[0]);

$('#oldConvas_img').attr('src',url)

$('.cropit-preview').html("<img src="+url+" style='margin:0 auto;' id='cropbox' />");

cropbox(url);

}

function reHeaderImg_submit(e,uid){

if (parseInt($('#w').val())) {

// return true ;

} else{

layer.msg('请先截取头像');

return false;

}

// var imageData = $('.image-editor').Jcrop('export');

// console.log($('#picSubmit').serialize());

var x = $("#x").val();

var y = $("#y").val();

var w = $("#w").val();

var h = $("#h").val();

if (x == 0 || y == 0 || w == 0 || h == 0) {

alert("请裁剪图像");

}

var ct=document.getElementById("oldConvas");

var newImg = ct.toDataURL("image/jpeg"); // 获得图片流

$.ajax({

type: "POST",

url: "{:U('User/changePic')}",

data:{'data':newImg},

dataType:'json',

success: function(msg){

if(msg =='1'){

layer.msg(msg.message)

}else{

layer.msg(msg.message)

}

});

}

</script>

<style type="text/css">

.reHeaderImg {

background-color: #ccc;

width: 500px;

height: 330px;

font-size: 24px;

display: block;

}

</style>

</body>

</html>

thinkphp:

/*改变头像*/

public function changePic(){

// 判断权限

if($_SESSION['muser']==null || $_SESSION['muser']== ''){

$this->error("非法操作",U('Index/index'));

}

// 检测是否是base64编码

if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $_POST['data'], $result)){

$type = $result[2];

$id = $_SESSION['mid'];

// 文件存储路径

$new_file = "./Public/Uploads/UserPic/{$id}.{$type}";

// 验证文件格式

if(!in_array($type,array('jpg', 'gif', 'png', 'jpeg'))){

AD('2','图片格式错误');

}else{

// base64解码

$info = str_replace($result[1], '', $_POST['data']);

$info = base64_decode($info);

// 存储文件

if (file_put_contents($new_file, $info)){

$m = M('user');

$id = $_SESSION['mid'];

// 更新文件

$result = $m->where("id={$id}")->setField('pic',"./Public/Uploads/UserPic/{$id}.{$type}");

AD('1','修改成功');

}else{

AD('2','修改失败');

}

Jcrop图片裁剪+canvas+thinkphp相关推荐

使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定支持 ...
php ci 处理图片裁剪,jquery.form + Jcrop + CI框架实现图片裁剪上传
功能: 1.通过jquery.form上传图片,并按一定比例显示预览图. 2.通过Jcrop裁剪图片,并显示裁剪预览图 3.通过CI的图像处理类保存剪切后图片问题: 1.通过jquery.form来 ...
canvas图片裁剪并base64转化
一．需求在canvas画布上,假设我们绘制了一张图片,现在需要将该图片进行裁剪,并将裁剪的区域提取成图像,并将该图像转化为base64格式返回,要求编写这样一个脚本. 二．知识储备 HTML5画布中 ...
html5 手机端剪裁,用Canvas实现h5移动端图片裁剪
前阵子七夕的时候搞了一个h5活动页,需要做一个本地图片的裁剪上传功能,用于生成一些特定的表白图片.主要是用到了H5的FileApi 和 Canvas.个人感觉图片裁剪功能还是很实用的,故写篇文章分享一 ...
think php 缩放图片,thinkphp图片裁剪、缩放、加水印方法
thinkphp图片裁剪.缩放.加水印方法如下: /** * 图像的裁剪.缩放.加水印 * @param string $path 路径 * @param int $width 裁剪的宽度/限制的高度 ...
ThinkPHP图片裁剪
ThinkPHP图片裁剪 function crop_image($file, $width = false, $height = false, $save_name = '', $force = f ...
jcrop java_SpringMVC结合Jcrop实现图片裁剪
本文实例为大家分享了SpringMVC结合Jcrop实现图片裁剪的具体代码,供大家参考,具体内容如下一.jsp页面: method="post" enctype="mu ...
图片裁剪入门Jcrop
互联网时代,越来越丰富多彩.当然,这离不开网络上各种各样的图片.然而,这也提高了我们对图片处理的要求.像百度.腾讯这样的数量级的处理,如果对图片的上传没有一些优化,那么每年多花费五六十台服务器.额外话 ...

Jcrop图片裁剪+canvas+thinkphp

前端代码：

thinkphp:

Jcrop图片裁剪+canvas+thinkphp相关推荐

最新文章

热门文章