<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
<title>Document</title>
</head>
<body>

<style>

*
{
margin:0;
padding:0;
}
.content{
position:relative;
background:yellow;

}
.img
{

}
.selectContainer
{
position: absolute;
border:1px solid rgba(255,255,255,0.5);
border-radius: 50%;
}
#info
{
height:50px;
}
</style>

<div id="info"></div>
<input type="file" accept="image/*" id="selectFile" />
<div class="content" id="content">

<img alt="选择图片" class="img" id="selectImg"/>
<div class="selectContainer"></div>

</div>
<canvas id="canvas"> </canvas>

<script type="text/javascript" src="js/touch.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/hijs.js"></script>

<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;

var sWidth = document.documentElement.clientWidth;
var sHeight = document.documentElement.clientHeight;
var imgLength =200;
var selectLength = 100;
var cssScale = "";
var cssTransform = "";
var orignImage =new Image();
var height ;
var width ;
var orignHeight;
var orignWidth;
var maxHeight;
var maxWidth;
var maxScal;
var minScal;
var maxOffx;
var maxOffY;
var offx ;
var offy ;
var cutX;
var cutY;
var currentScale=1;
var target = document.getElementById("selectImg");
$("#selectFile").change(function(){

var file = this.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);

fileReader.onload=function(){
orignImage.src=this.result;
orignHeight =height = orignImage.height;
orignWidth = width = orignImage.width;
if(height>imgLength&&width>imgLength)
{
if(height>width)
{
width = imgLength/height*width;
height = imgLength;
}
else
{
height=imgLength/width*height;
width = imgLength;
}

}else if(height>imgLength&&width<=imgLength)
{
width = imgLength/height*width;
height= imgLength;
}
else if(height<=imgLength&&width>imgLength)
{
height = imgLength/width*height;
width=imgLength;
}

$(".img").attr("src",this.result);
$(".img").width(width).height(height);
$(".img").css("margin","0 auto");
$(".img").css("display","block");
var selectBoderleft= (sWidth - selectLength)/2+"px";
var selectBoderTop = (height-selectLength)/2+"px";
$(".selectContainer").height(selectLength-2);
$(".selectContainer").width(selectLength-2);
$(".selectContainer").css("top",selectBoderTop);
$(".selectContainer").css("left",selectBoderleft);
maxScal=sWidth/imgLength;
minScal=selectLength/width;
maxOffx =(target.offsetWidth - selectLength)/2;
maxOffY =(target.offsetHeight - selectLength)/2;
$("#info").html("Y:"+target.offsetHeight);

}

})

$(function() { //放大缩小

target.style.webkitTransition = 'all ease 0.05s';
touch.on('#content', 'touchstart', function(ev) {
ev.preventDefault();
});
var initialScale = 1;

touch.on('#content', 'pinchend', function(ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > maxScal ? maxScal : currentScale; //自己调节可以放大的最大倍数
currentScale = currentScale < minScal ? minScal : currentScale; //自己调节可以缩小的最小倍数
cssScale = 'scale(' + currentScale + ')'
target.style.webkitTransform = cssTransform+cssScale;
initialScale = currentScale;
maxOffx =(target.offsetWidth*currentScale - selectLength)/2;
maxOffY =(target.offsetHeight*currentScale - selectLength)/2;

});

});

$(function() {

touch.on('#selectImg', 'touchstart', function(ev) {
ev.preventDefault();
});

var dx, dy;
touch.on('#selectImg', 'drag', function(ev) {
dx = dx || 0;
dy = dy || 0;
offx = dx + ev.x ;
offy = dy + ev.y ;

if(offy>maxOffY)
{
offy=maxOffY
}
if(offy<-maxOffY)
{
offy=-maxOffY;
}
if(offx>maxOffx)
{
offx=maxOffx
}
if(offx<-maxOffx)
{
offx=-maxOffx;
}

cssTransform = "translate3d(" + offx + "px," + offy + "px,0)";

this.style.webkitTransform = cssTransform + cssScale;

cutX = ((width*currentScale- selectLength)/2-offx)*orignWidth/width;
cutY =((height*currentScale- selectLength)/2-offy)*orignHeight/height;
selectWidth = selectLength/currentScale;
selectHeight =selectLength/currentScale;
console.log(currentScale, target,cutX,cutY,selectWidth,selectHeight);
context.drawImage(orignImage,cutX,cutY,orignWidth*selectLength/currentScale/width,orignHeight*selectLength/currentScale/height,0,0,canvas.width,canvas.height);

$("#info").html("cux="+cutX +" cutY="+cutY);

});
touch.on('#selectImg', 'dragend', function(ev) {
dx += ev.x;
dy += ev.y;

});
})

</script>

</body>
</html>

mimi的更多相关文章

  1. 上传时excel类型accept的MIMI类型

    1.excel文件类型 accept='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/v ...

  2. WebSocket - ( 一.概述 )

    说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...

  3. Oracle 内置sql函数大全

    F.1字符函数--返回字符值 这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据 ...

  4. JavaScript面向对象和原型函数

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...

  5. Java内部类的定义和使用

    为什么要用到内部类: 在java开发学习中我们经常会碰到内部类.内部类又有很多的优势:首先举一个简单的例子,如果你想实现一个接口,但是这个接口中的一个方法和你构想的这个类中的一个方法名称参数相同,你应 ...

  6. JS 原型，检索，更新，引用等

    <script type="text/javascript"> var myObject=maker({ first:f, last:1, state:s, city: ...

  7. oracle函数大全（转载）

    F.1字符函数--返回字符值 这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据 ...

  8. ipa如何通过网络进行安装

    苹果手机端应用,如果发布的到Appstore上,往往比较复杂,周期也比较长,Over-the-Air是Apple在 iOS4 中新加的一项技术,目的是让开发者能够脱离Appstore,实现从自己的服务 ...

  9. 12种不适宜使用的javascript语法

    1. == (o゜▽゜)o☆[BINGO!] Javascript有两组相等运算符,一组是==和!=,另一组是===和!==.前者只比较值的相等,后者除了值以外,还比较类型是否相同. 请尽量不要使用前 ...

随机推荐

  1. logistic回归 c++ 实现

    logistic回归是统计学习中经典的分类方法,他属于对数线性模型.本博文主要给出logistic的c++实现,具体理论请读者自行google. 本文用到的数据集来自于一个医学网站,具体出处不记得了( ...

  2. 程序媛也会画图 之 在ubuntu下用GIMP制作gif

    动画是什么?就是几张图片很快的顺序播放嘛,今天就画画gif小图吧,以后在演示效果图的时候也用的上. 1.准备一个小图 就用小绿人好了 2.打开GIMP 3.新建一个图片打开  文件 ->新建输入 ...

  3. CentOS6.8安装JDK1.7

    一.查看当前系统是否自带JDK rpm -qa | grep java tzdata-java-2016c-1.el6.noarch java-1.7.0-openjdk-1.7.0.99-2.6.5 ...

  4. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  5. thinkphp空操作和配置文件实现简化路由

    1关于TP中空操作和路由问题 <?php function test(){ $content="test demo @云峰天下"; $pattern='/@(\S+)\s/' ...

  6. Emacs折腾经验谈

    Emacs折腾经验谈 这几天都没有动力写mongodb的东西,我果然还是太懒了么~ 主要是没有一个系统的东西整理出来,加上我令人拙计的语言表达能力,这个坑只能慢慢再补了. 最近在折腾emacs这个东西 ...

  7. VC 编程ANSI环境下读写Unicode文件

    没有注意到文件编码的不同会产生这么多的问题,在动手以前查询了很多资料,在本博客中收藏了不少先辈的成果,在这里一并表示致敬!       关于ANSI和Unicode编码的原理在这里也不说了,主要讲下如 ...

  8. 在使用simplexml_load_file()函数读取xml文件时遇到<![CDATA[]]>，怎么让其进行解析

    simplexml_load_file ( '1394.xml', 'SimpleXMLElement', LIBXML_NOCDATA ); 使用这个函数里面的这两个参数

  9. MacOSX 下.app支持同时运行多个实例

    在MacOSX下的.app是一个程序包(实际上是个目录),双击该目录时系统会根据包的目录结构启动相应的可执行程序..app的程序默认是单实例运行的,所以从.app启动的程序实例只有一个(可执行程序不受 ...

  10. .Net里的Attribute 学习

    .Net里的Attribute 学习 前两天看到书里边讲Attribute定制,结合了网上的资料,自己做了简单的登录功能,并结合了某些设计模式,有兴趣的朋友可以看下.由于时间原因,没有做过多的说明,直 ...