每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js

Jcrop图片裁剪+canvas+thinkphp

发布时间：2019-01-09 09:21:42 修改时间：2019-01-09 09:26:09 阅读：4576 评论：0 0

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

前端代码：

<!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','修改失败');

}

转载请注明地址：

如有侵权，立即删除！

回复列表

注册用户登录后才能发表评论，请登录或注册.

关键字词：nbsp,span,style,font-size,1px,code

上一篇：css常用属性

下一篇：如何提高JavaScript代码质量(一)

TANG LI LIFE.

每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js

Jcrop图片裁剪+canvas+thinkphp

前端代码：

thinkphp:

回复列表

相关文章