在触屏设备上面利用html5裁剪图片(转)
前言
现在触屏设备越来越流行，而且大多数已经支持html5了。针对此，对触屏设备开发图片裁剪功能，
让其可以直接处理图片，减轻服务端压力。
技术点
浏览器必须支持html5，包括fileReader，canvas等api，并且该设备至少支持单点触事件（touchstart,touchmove,touchend），可惜的是
很多浏览器只能识别一只手指（不支持多点触摸事件，假如支持的话，请告知我）。
思路
利用filereader直接读取本地图片，然后赋予一个图片，该图片及裁剪框的位置计算跟pc端一样，但是触发的事件不一样，触屏版是根据触屏事件触发的。裁剪时，利用cavas的api直接画出相关图像，然后得到数据，再利用xmlhttprequest发送请求。
非html5无法完成这个过程。
运行结果
这只是一个demo，也是最初的雏形，当然不会太好看了，但是基本实现功能即可。
部分代码
<!doctype html>
<html> <head>
<meta name="Author" content="flashlizi - www.riaidea.com">
<meta name="Description" content="HTML5 experiment">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>头像上传组件 - HTML5版</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <style>
body
{
padding: ;
margin: ;
height: %;
background-color: #eee;
font-size: 12px;
color: #;
} a
{
text-decoration: none;
color: #;
} a:hover
{
text-decoration: none;
color: #f00;
} </style>
<script> if(window.FileReader==undefined){
alert("该手机不支持html5");
} </script> <script type="text/javascript" src="/static/mobile/lib/zepto.min.js"></script>
</head> <body >
<h1>选择图片：<input type="file" id="browseFile" onchange=""><input type="button" id="saveimg" value="保存图片"/></h1>
<div id="wrapper" style="border: 1px gray dotted; padding: 25px;"> <div id="component_box" style="position: relative; border: 1px green solid; width: 300px; height: 300px;">
<div id="tipBox" style="display: none;">
<img src=""/>
</div>
<div id="mainCutter" style="overflow: hidden; display: none; position: relative;">
<img id="imgPreview" />
<div id="cutBox" style=" position:absolute; width: 150px; height: 200px; opacity: 0.5; background: gray;"></div>
</div>
</div> <!--画布--> <canvas id="cropper" style=" display:none;border:1px solid red; width: 300px; height: 300px;" ></canvas>
</div>
<div><span style="color: green;">调整裁剪区域大小：</span>
<!--调整用slider-->
<div><div id="processBar" style=" margin: 0 auto; position: relative; width: 220px; height: 20px; background: green;"><div id="processPoint" style="background: url(images/horizSlider.png); width: 18px; height: 20px; position: absolute;left: 0;top: 0;"></div></div></div>
</div>
<div id="the_show" style="display: none;">
<h2>提示：</h2>
<div id="theTips"></div> <h2>后台获得的图像</h2>
<img src="" id="showImg"/>
</div>
<div style="color: green;">友情提醒：拖动裁剪框裁剪框将随之移动，上划放大裁剪框，下滑缩小裁剪框。</div>
<div id="tips2" style="color: green; position: absolute;left: 0px; bottom: 0px; border: 1px solid green;"></div> <script type="text/javascript">
//--逻辑，点击图片上传选择后将加载预览图片
var Options={
width:,
height:,
cutWidth:,
cutHeight:,
cutMinSize:,//裁剪框最小尺寸，即最小可以缩放到这个size，width及height任意一个都无法小于这个值。 //--系统自带，运行时自动运算，请不要修改。
cropViewWidth:,//在画布里面显示的最大宽度
cropViewHeight:,//在画布里面显示的最大高度
cropLeft:,
cropTop:,
//--裁剪框
cutViewWidth:, //当前宽度，
cutViewHeight:,//当前高度
cutMaxWidth:, //裁剪框最大宽度。
cutMaxHeight:,//裁剪框最大高度。
//--四象限。用于判断距离。
cutBoxLimitX1:,
cutBoxLimitX2:,
cutBoxLimitY1:,
cutBoxLimitY2:,
cutLeft:,//裁剪框绝对定位，左侧距离。
cutTop:,//裁剪框绝对定位，离顶部距离。
initStatus:false//当前组件是否已经初始化了。
};
var Options_image={
width:,
height:,
imgData:""
} var input_browseFile = document.getElementById("browseFile");
var img_preview = document.getElementById("imgPreview");
var cutBox=document.getElementById("cutBox");
var tipBox=document.getElementById("tipBox");
var _cropper=document.getElementById("cropper");
var mainCutter=document.getElementById("mainCutter");
var tips2=$("#tips2");
var wrapper=document.getElementById("wrapper");
var component_box=document.getElementById("component_box"); var ctx = _cropper.getContext('2d');//ctx.drawImage(myImage, 50, 50);
function previewInImage (file) {
//通过file.size可以取得图片大小
var reader = new FileReader();
LoadingImage(); reader.onload = function( evt ){
img_preview.src = evt.target.result;
}
Options_image.imgData= reader.readAsDataURL(file);
}
img_preview.onload=function(){
Options_image.width=img_preview.width;
Options_image.height=img_preview.height;
_initCropAndCut();
}
function LoadingImage(){
$(img_preview).css({"width":"","height":""});
}
function _initCropAndCut(){
//--计算比例，将其放到canvas里面。 var scale = Math.max(Options_image.width/Options.width,Options_image.height/Options.height);
if(scale>){
Options.cropViewWidth=parseInt(Math.floor(Options_image.width/scale));
Options.cropViewHeight=parseInt(Math.floor(Options_image.height/scale));
}
else{
Options.cropViewWidth=Options_image.width;
Options.cropViewHeight=Options_image.height;
}
//--计算画布里面的图像的位置。
Options.cropLeft=parseInt((Options.width-Options.cropViewWidth)/);
Options.cropTop=parseInt((Options.height-Options.cropViewHeight)/);
//--计算裁剪框实际大小及实际位置。
//计算裁剪框的位置。 var scale_2=Math.max(Options.cutWidth/Options.cropViewWidth,Options.cutHeight/Options.cropViewHeight);
if(scale_2>){
Options.cutViewWidth=parseInt(Math.floor(Options.cutWidth/scale_2));
Options.cutViewHeight=parseInt(Math.floor(Options.cutHeight/scale_2));
}
else{
Options.cutViewHeight=Options.cutHeight;
Options.cutViewWidth=Options.cutWidth;
}
Options.cutMaxWidth=Options.cutViewWidth;
Options.cutMaxHeight=Options.cutViewHeight; Options.cutLeft=parseInt(Math.floor((Options.cropViewWidth-Options.cutViewWidth))/);
Options.cutTop=parseInt(Math.floor((Options.cropViewHeight-Options.cutViewHeight))/);
//-四象限。
Options.cutBoxLimitX1=;
Options.cutBoxLimitX2=Options.cropViewWidth;
Options.cutBoxLimitY1=;
Options.cutBoxLimitY2=Options.cropViewHeight; $(cutBox).css({"display":"block","width":Options.cutViewWidth+"px","height":Options.cutViewHeight+"px","left":Options.cutLeft+"px","top":Options.cutTop+"px"});
$(img_preview).css({"width":Options.cropViewWidth+"px","height":Options.cropViewHeight+"px"});
$(mainCutter).css({"display":"block","width":Options.cropViewWidth+"px","height":Options.cropViewHeight+"px","left":Options.cropLeft+"px","top":Options.cropTop+"px"});
//ctx.drawImage(img_preview,Options.cropLeft,Options.cropTop,Options.cropViewWidth,Options.cropViewHeight);
//ctx.drawImage(img_preview, 0, 0, Options_image.width,Options_image.height, Options.cropLeft, Options.cropTop, Options.cropViewWidth, Options.cropViewHeight ); Options.initStatus=true;
Options_process.initStatus=true;
Options_process.percent=;
Options_process.pointX=Options_process.barWidth;
_resizeProcessBar();
} input_browseFile.addEventListener("change", function () {
//通过 this.files 取到 FileList ，这里只有一个
previewInImage(this.files[]); }, false);
//--添加缩放功能。
Options_zoom={
beginX1:,
beginY1:,
beginX2:,
beginY2:,
endX1:,
endY1:,
endX2:,
endY2:
};
//--添加裁剪框移动功能
Options_move={
beginX1:,
beginY1:,
endX1:,
endY1:
}; /**
* 拖动裁剪框的逻辑处理。
* */
cutBox.addEventListener("touchstart",function(event){
event.preventDefault();
event.stopPropagation();
Options_move={
beginX1:,
beginY1:,
endX1:,
endY1:
};
var beginX=event.changedTouches[].pageX;
var beginY=event.changedTouches[].pageY;
Options_move.beginX1=beginX;
Options_move.beginY1=beginY; },false);
cutBox.addEventListener("touchmove",function(event){
event.preventDefault();
event.stopPropagation();
//--
var beginX=event.changedTouches[].pageX;
var beginY=event.changedTouches[].pageY;
Options_move.endX1=beginX;
Options_move.endY1=beginY;
//--计算是否发生位移，根据位移来定位裁剪框位置。
//位移量。
var _d_x=Options_move.endX1-Options_move.beginX1;
var _d_y=Options_move.endY1-Options_move.beginY1;
//--当前裁剪框原始位置。
var _new_x=Options.cutLeft;
var _new_y=Options.cutTop;
_new_x+=_d_x;
_new_y+=_d_y;
//--判断是否在矩形边框，假如超出去，那么就取最终点。
//--注意，判断相关点的范围。 if(_new_x<Options.cutBoxLimitX1){
_new_x=Options.cutBoxLimitX1;
}
else if(_new_x>Options.cutBoxLimitX2){
_new_x=Options.cutBoxLimitX2;
}
//--顺便判断，加上宽度后，是否超过了范围。
if((_new_x+Options.cutViewWidth)>Options.cutBoxLimitX2){
_new_x=Options.cutBoxLimitX2-Options.cutViewWidth;
}
if(_new_y<Options.cutBoxLimitY1){
_new_y=Options.cutBoxLimitY1;
}
else if(_new_y>Options.cutBoxLimitY2){
_new_y=Options.cutBoxLimitY2;
}
//--顺便判断，加上裁剪框高度后，是否超过下限。
if((_new_y+Options.cutViewHeight)>Options.cutBoxLimitY2){
_new_y=Options.cutBoxLimitY2-Options.cutViewHeight;
} Options.cutLeft=_new_x;
Options.cutTop=_new_y;
_resizeCutBox();
//---将这一点的放回前一点。
Options_move.beginX1=Options_move.endX1;
Options_move.beginY1=Options_move.endY1; },false);
cutBox.addEventListener("touchend",function(event){
event.preventDefault();
event.stopPropagation();
return; },false);
/**
* 根据相关参数重新resize裁剪框
* */
function _resizeCutBox(){
$(cutBox).css({"width":Options.cutViewWidth+"px","height":Options.cutViewHeight+"px","left":Options.cutLeft+"px","top":Options.cutTop+"px"});
}
function _getCutImageData(){
var output = document.createElement("canvas");
//--坐标换算。
var scale_x=Options_image.width/Options.cropViewWidth;
var scale_y=Options_image.height/Options.cropViewHeight;
var _o_x=parseInt( (scale_x)*Options.cutLeft);
var _o_y=parseInt( (scale_y)*Options.cutTop);
//--长度换算
var _o_width=parseInt(scale_x*Options.cutViewWidth);
var _o_height=parseInt(scale_y*Options.cutViewHeight); output.width = Options.cutWidth;
output.height = Options.cutHeight;
output.getContext("2d").drawImage(img_preview, _o_x,_o_y, _o_width, _o_height, , , output.width, output.height);
return output.toDataURL("image/jpeg");
}
function saveImage()
{
var imgData = _getCutImageData();
/* $("#the_show").css("display","block"); document.getElementById("showImg").src=imgData;
return;
*/
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e)
{
if(xhr.readyState == )
{
if(xhr.status == )
{
//--获取返回的数据。
var _res=xhr.responseText;
_res= $.trim(_res);
var json= $.parseJSON(_res);
if(json.status==true){
$("#the_show").css("display","block");
var surl=json.url+"?t="+Math.random();
$("#showImg").attr("src",surl);
}
else{
alert(json.message);
}
//document.getElementById("status").innerHTML = "<font color='#f00'>上传成功！</font>";
}
else{
alert("服务端无法响应，错误编号："+xhr.status); }
}
}; xhr.open("post", "/quickTest/html5CropperHandler.jsp", true);
var data = new FormData();
data.append("username", "flashlizi");
data.append("size", );
data.append("file", imgData);
xhr.send(data);
}
/**
* processBar 进度条相关操作。
* */ Options_process={
beginX:,//触摸时候起始点
beginY:,//触摸时候起始点
endX:,//触摸时候终点
endY:,//触摸时候终点
barWidth:,//进度条长度
pointX:,//当前指示点位置
pointY:,
percent:,//百分比值。
initStatus:false
};
var processBar=document.getElementById("processBar");
var processPoint=document.getElementById("processPoint"); //--添加触屏事件，监控相关动作。
//开始触摸
processBar.addEventListener("touchstart",function(event){
event.preventDefault();
event.stopPropagation(); if(!Options_process.initStatus){
return;
}
var beginX=event.changedTouches[].pageX;
var beginY=event.changedTouches[].pageY;
Options_process.beginX=beginX;
Options_process.beginY=beginY;
},false) ;
//--移动中
processBar.addEventListener("touchmove",function(event){
event.preventDefault();
event.stopPropagation(); if(!Options_process.initStatus){
return;
}
var beginX=event.changedTouches[].pageX;
var beginY=event.changedTouches[].pageY;
Options_process.endX=beginX;
Options_process.endY=beginY;
//--计算比分比。
var _d_x=Options_process.endX-Options_process.beginX;
Options_process.percent+=parseInt(_d_x*/Options_process.barWidth);
if(Options_process.percent<){
Options_process.percent=;
}
else if(Options_process.percent>){
Options_process.percent=;
}
//--计算那个指示点位置。
Options_process.pointX=parseInt(Options_process.barWidth*(Options_process.percent/));
_resizeProcessBar();
//--根据百分比，设置裁剪框大小。
var _o_cut_x=Options.cutLeft;
var _o_cut_y=Options.cutTop;
var _o_cut_width=Options.cutViewWidth;
var _new_cut_width= parseInt(Options.cutMaxWidth*(Options_process.percent/));
var _new_cut_height= parseInt(Options.cutMaxHeight*(Options_process.percent/));
if(_new_cut_width>_o_cut_width){
//--扩大了。
//--计算当前坐标
var _d_x_2=_new_cut_width-Options.cutViewWidth;
var _d_y_2=_new_cut_height-Options.cutViewHeight; Options.cutLeft=Options.cutLeft-parseInt(_d_x_2/);
Options.cutTop=Options.cutTop-parseInt(_d_y_2/);
Options.cutViewWidth=_new_cut_width;
Options.cutViewHeight=_new_cut_height;
_resizeCutBox(); }
else if(_new_cut_width<_o_cut_width){
//--缩小了。
var _d_x_2=Options.cutViewWidth-_new_cut_width;
var _d_y_2=Options.cutViewHeight-_new_cut_height;
Options.cutLeft=Options.cutLeft+parseInt(_d_x_2/);
Options.cutTop=Options.cutTop+parseInt(_d_y_2/);
Options.cutViewWidth=_new_cut_width;
Options.cutViewHeight=_new_cut_height;
_resizeCutBox(); } //--后续处理。
Options_process.beginX=Options_process.endX;
Options_process.endY=Options_process.endY; },false) ;
//--结束
processBar.addEventListener("touchend",function(event){
event.preventDefault();
event.stopPropagation(); if(!Options_process.initStatus){
return;
}
},false) ;
/**
* 根据相关属性，重设slider位置。
* */
function _resizeProcessBar(){
$(processPoint).css("left",Options_process.pointX+"px");
} $("#saveimg").click(function(){
if(Options.initStatus==false){
alert("请先选择图片！");
return;
}
saveImage();
}); </script> </body>
</html>
在触屏设备上面利用html5裁剪图片(转)的更多相关文章
- 在触屏设备上面利用html5裁剪图片
前言 如今触屏设备越来越流行,并且大多数已经支持html5了.针对此.对触屏设备开发图片裁剪功能, 让其能够直接处理图片.减轻服务端压力. 技术点 浏览器必须支持html5,包含fileReader. ...
- jquery -- 触屏设备touch事件
几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...
- 在触屏设备中拖动 overflow 元素
在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
- [Winform]关于cefsharp触屏设备长按文本内容，崩溃问题的修复
摘要 在之前遇到cefsharp,在触屏电脑上,长按文本内容,会崩溃的问题. 相关文章 当时遇到这样的问题,在cefsharp项目下提交了bug.已经修复,可以参考当时我提的bug,以及解决过程,可参 ...
- 触屏设备上的多点触碰检测C++代码实现
转自:http://aigo.iteye.com/blog/2272698 代码还是参考自Epic官方的塔防项目:StrategyGame 看了下C++的API,现成的API中貌似只支持单点触碰检测, ...
- 让BOOTSTRAP默认SLIDER支持触屏设备
var isTouch=('ontouchstart' in window); if(isTouch){ $(".carousel").on('touchstart', funct ...
- iOS 利用Context裁剪图片
下面的代码可以裁剪出圆形的图片, 1,先把不规则图片转成正方形图片 UIGraphicsBeginImageContext(newSize); [image drawInRect:CGRectMake ...
- 利用html5压缩图片，产出base64图片
/* 将页面选择的图片等比压缩成指定大小(长边固定) file:图片文件 callBack:回调函数 maxLen:长边的长度*/function makePic(file,callBack,maxL ...
随机推荐
- centos：添加用户
初步进入centos学习,配置用户 1,创建用户 创建用户 hadoop [root@master spark]# useradd hadoop [root@master spark]# 2,创建密码 ...
- express统一输出404页面
不玩不知道,一玩吓一跳,还真是,nodejs全局404怎么搞? 直接,res.render("404.html")有可能会报错:Node.js : Cannot find modu ...
- springboot 中使用事务
直接在service 层的方法上加上@Transactional 注解就ok. 注意事项: 1.Spring 基于注解的声明式事物 @Transactional 默认情况下只会对运行期异常(java. ...
- (转)No row with the given identifier exists问题的解决
产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-one unique ...
- 【Python】安装geocoder
C:\Users\horn1\Desktop\python\49-geo>pip install geocoder Collecting geocoder Downloading https:/ ...
- leverage准确翻译，译法，英文
这个词的翻译很有问题.很多大词典都只有这么几个译法:影响力,杠杆.作为动词的时候我建议翻译为:借助,凭借,凭仗,依仗,借重某外文原稿(https://www.vmware.com/files/pdf/ ...
- [转]double与BigDecimal
转自:http://superivan.iteye.com/blog/963628 [1] 精确的浮点运算: 在Java里面,有时候为了保证数值的准确性需要精确的数据,先提供一个例子就可以发现问题了: ...
- 用 bottle.py 写了个简单的升级包上传
可以当作一个 demo 来玩吧,在这里分享一下.里面涉及的内容包含了文件上传,cookie 设置和读取,重定向(redirect). from bottle import run, post, get ...
- js 原型链 prototype __proto__
1.说明 函数(Function)才有prototype属性,对象(除Object)拥有__proto__. 2.prototype与__proto__区别 示例: <!DOCTYPE html ...
- oracle 替换字符串中指定位置内容
1.情景展示 返回服务器的身份证号需要进行加密:只保留前四位和后四位,中间使用*代替,如何实现? 2.解决方案 第一步:查看该表的身份证号的长度有几种类型: 第二步:编写sql 错误方式: 长度为 ...