利用html5 canvas实现纯前端上传图片的裁剪

今天跟大家分享一个前端裁剪图片的方法.

许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.
当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真正的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下:

1.html部分:
<div>
<input type="file" id="imgFile">
</div>
<div style="width: 300px;height: 300px;position: absolute;left: 300px;top: 0;display: inline-block">
<img id="demoImg" style="height: 300px;width: 300px" >
<div style="width: 150px;height: 150px;border: 1px solid #4fb8e3;position: absolute;left: 0;top: 0;z-index: 1000" id="chooseBox"></div>
</div>
<div style="position: absolute;left: 700px;top: 0">
<canvas id="myCan" width="150" height="150"></canvas>
<button id="cut">裁剪文件</button>
<button id="btn">后台返回获取裁剪后的文件</button>
<img id="returnImg" >
</div>

页面初始截图如下:

2.第二步进行文件选择后的预览操作
var can=document.getElementById("myCan");var btn=document.getElementById("btn");var returnImg=document.getElementById("returnImg");var ctx=can.getContext("2d");

$(‘#imgFile‘).change(function () {   var file=$(‘#imgFile‘)[0].files[0];    var reader=new FileReader();    reader.onload= function (e) {        $(‘#demoImg‘).attr(‘src‘, e.target.result);    };    reader.readAsDataURL(file);});

3.进行裁剪

注意到任务图像里面有一个蓝色边框的选择框(大小固定,没有做缩放),将蓝色选框移动到你需要的位置,点击裁剪文件
$(‘#cut‘).click(function () {    var newX=$(‘#chooseBox‘).position().left*3.45;    var newY=$(‘#chooseBox‘).position().top*2.6;    var img=document.getElementById("demoImg");    console.log(newX,newY);    ctx.drawImage(img,newX,newY,150*3.45,150*2.6,0,0,150,150);});

4.将裁剪后的图片传给后台,并将返回的图片展示
btn.onclick=function () {    var data=can.toDataURL();    data=data.split(‘,‘)[1];    data=window.atob(data);    var ia = new Uint8Array(data.length);    for (var i = 0; i < data.length; i++) {        ia[i] = data.charCodeAt(i);    }    var blob=new Blob([ia],{type:"image/png",endings:‘transparent‘});    var fd=new FormData();    console.log(blob);    fd.append(‘avatarFile‘,blob,‘image.png‘);    var httprequest=new XMLHttpRequest();    httprequest.open(‘POST‘,‘/guest/avatar‘,true);    httprequest.send(fd);    httprequest.onreadystatechange= function () {        if(httprequest.status==200 && httprequest.readyState==4){            console.log(httprequest.responseText);            $(‘#returnImg‘).attr(‘src‘,‘/images/‘+JSON.parse(httprequest.responseText).json);        }    };};

整个demo的注意点有四点:

1.图片上传之后使用fileReader将图片文件转换成base64 png格式图片,从而实现预览

2.图像选择框的移动,mousedown,mouseup,mouseup事件的配合使用

3.html5 canvas实现图片裁剪后的效果展示

4.利用html5 formData,将图片文件转换成blob对象,传给后台

完整源码请移步我的github项目地址:
https://github.com/hyq2015/canvas_crop_img

参考文档:http://blog.csdn.net/cuixiping/article/details/45932793     https://segmentfault.com/a/1190000000754560      http://blog.csdn.net/oscar999/article/details/36373183
时间: 2024-10-02 17:26:52

利用html5 canvas实现纯前端上传图片的裁剪的相关文章

HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)

原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证.这样就造成了一定的服务器资源浪费.但是html5时代,这个工作我们完全可以交给前端来做了. 另一方面,html5时代,许多我们原来的图片预览方案都失效了.究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真

利用html5调用本地摄像头拍照上传图片[转]

利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取.. 目前支持html5

利用HTML5 Canvas和Javascript实现的蚁群算法求解TSP问题演示

HTML5提供了Canvas对象,为绘图应用提供了便利. Javascript可运行于浏览器中, 而不需要安装特定的编译器: 基于HTML5和Javascript语言, 可随时编写应用, 为算法测试带来便利. 针对TSP问题, 编写了Ant colony algorithm, 用于演示该算法, tsp_ant_colony_algorithm.html代码如下: <html> <head> <meta charset = "utf-8" / > &l

html5 canvas 笔记五(合成与裁剪)

组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”. source-over 这是默认设置,新图形会覆盖在原有内容之上. destination-over 会在原有内容之下绘制新图形. source-in 新图形会仅仅出现与原有内容重叠的部分.其它区域都变成透明的. destina

利用html5的画布实现图片的自由裁剪

先看效果 操作方法: 1.图片地址,粘入input框中. 2.点击抓取,此后便可在图片中用鼠标划出目标区域. 3.点击裁剪便可裁剪出目标区域. 4.点击保存,即可将裁剪的图片上传到服务器. 附件下载:http://pan.baidu.com/s/1gdmxHnl ps:附件中的代码,只供参考.

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

基于HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷. 在线预览   源码下载 HTML代码如下 <p class="center">Change pixel resolution <input type="r

7个惊艳的HTML5 Canvas动画效果及源码

HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来看看. 1.HTML5 Canvas瀑布动画 超逼真 这是一个很逼真的HTML5瀑布动画,基于Canvas实现的,效果相当酷. 在线演示   /   源码下载 2.HTML5 Canvas彩色像素进度条动画 这也是一款基于HTML5 Canvas的动画特效,它是一个很有创意的HTML5进度条,大家可

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片