急需表明

本文介绍了头像裁剪上传功用,用到的才具有
jQuery,springmvc,裁剪插件用的是jcrop。

本文向你展现什么转变Image为canvas,以致canvas怎么着提抽出三个Image。 调换Image为 Canvas 要把图片转变为Canvas(画板,画布卡塔尔(قطر‎,能够选取canvas成分context 的drawImage方法: 复制代码
金沙糖果派对2015cc,代码如下:

轻松易行来讲正是要落到实处客户上传头像,而且要封存顾客裁切后的局地作为顾客头像。

2.将图片传遍后台:客户筛选图片的时候选用的是二种二种的,不过大家的网页突显图片大小是个其余,所以大家将在要客商选拔图片之后将图片加多到后台实行压缩,压缩成大家想要的大小,之后再显示到页面才好

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
  // 创建canvas DOM元素,并设置其宽高和图片一样 
  var canvas = document.createElement("canvas"); 
  canvas.width = image.width; 
  canvas.height = image.height; 
  // 坐标(0,0) 表示从此处开始绘制,相当于偏移。 
  canvas.getContext("2d").drawImage(image, 0, 0); 
  return canvas; 
} 

其次步,在弹窗页面中表现并张开裁切:

3.应用jcrop裁剪工具对图纸打开裁剪而且实时预览

改变 Canvas 为 Image
假使图像已经在canvas上管理好,那么能够利用以下措施,把canvas转变为图片Image对象。
代码如下:

其三步,点击“保存”,上传服务器。

4.点击分明开关将裁剪用到的参数字传送入后台,后台图片实行划分,之后缩放成大家须求的格式

// 从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
  //新Image对象,可以理解为DOM 
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 
  // 指定格式 PNG 
  image.src = canvas.toDataURL("image/png"); 
  return image; 
} 

达成进度

5.结尾将图纸路线传回前台实行浮现

额金沙糖果派对网站app,!图像image和canvas的交互作用转变比你想像的还要轻巧,以往自己将向你演示差别的图像管理本领,相信在以后您明确能用这一个本领赚到大钱。

说来有一点坎坷,相当于做了2遍,走了弯路。

     /* 控制预览区域大小*/ #preview-pane .preview-container { width: 110px; height: 110px; overflow: hidden; } #targetDiv{ width: 400px; height: 400px; background-color:#f7fdff; }  

品类成功叁个裁切图片的职能,就是让客户上传头像的时候能够裁切一下图形,选用二个适中大小地方来作为头像。之中用到了crop.js这几个插件,用canvas直接绘制了顾客裁切缩放后的图形。裁切的进度那边就不详细展开了,想要掌握详细的情况的仇敌能够深刻摸底一下crop.js插件,那边享受一下在生成canvas图片后,通过ajax来上传来服务器的贰个进度。就以PHP为例:
[图形上传中。。。(1)]
<script>var canvas = document.getElementById(“canvas_img”);var
img = canvas.toDataURL();var ajax = null; if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();} else { ajax = new
ActiveXObject(“Microsoft.XMLHTTP”);}ajax.onreadystatechange = function()
{ if (ajax.readyState == 4 && ajax.status == 200) {
alert(ajax.responseText); }}ajax.open(“POST”, “save.php”,
true);ajax.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);ajax.send(“img=”

第1遍是顾客大器晚成采取图片,就進展了上传,然后回到叁个地点,所以在弹层上海展览中心现的图纸已然是服务器上的图纸了,然后进行裁切,再保存。

头像上传
预览
金沙糖果派对网站app 1

  • img);</script>
    [图形上传中。。。(2)]

第2遍找到的多少个主意,是在第1遍完毕裁切管理时候想到的,即弹层表现的是顾客机器上接受的图形,不用先上传,可是用image/base64来显现的。那样就与服务器少了叁次人机联作啊,何况服务器不用存款和储蓄2遍图片,还坚实了弹层表现速度,体验更好,所以是极好的。

尺寸:110*110px

[图形上传中。。。(3)]
<?php define(‘UPLOAD_DIR’, dirname(FILE卡塔尔(英语:State of Qatar).’/’卡塔尔(英语:State of Qatar); //图片保存路线$img = $_POST[‘img’]; $img = str_replace(‘data:image/png;base64,’,
”, $img); $img = str_replace(‘ ‘, ‘+’, $img); $data =
base64_decode($img); $day = date(“Ymd”,time()); $file_name =
mt_rand(1000000000000000,9999999999999999); if(!is_dir(UPLOAD_DIR .
$day)){ mkdir(UPLOAD_DIR . $day); } $file = UPLOAD_DIR .
$day.”/”.$file_name. ‘.png’; $success = file_put_contents($file,
$data); return $success;?>

说下境遇的主要技术点:

请从地点选取一张照片,补助jpg,png格式

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注