<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Hammer.js</title>
<style>
html, body {
overflow: hidden;
margin: 0;
background: #666666;
padding: 0;
height: 100%;
min-height: 100%;
font: 13px/1.5em 'Open Sans', Helvetica, Arial, sans-serif;
}
body {
-webkit-perspective: 500;
-moz-perspective: 500;
perspective: 500;
}
.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#hit {
padding: 10px;
}
#log {
position: absolute;
padding: 10px;
}
.main{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 1;
}
.minDiv{background: #fff;}
.minDiv.left-up{top:-4px;left: -4px;cursor:nw-resize;}
.minDiv.left-down{bottom:-4px;left: -4px;cursor:sw-resize;}
.minDiv.right-up{top:-4px;right: -4px;cursor:ne-resize;}
.minDiv.right-down{bottom:-4px;right: -4px;cursor:se-resize;}
#preview{position: absolute;top:220px;left:0px;width:200px;height:200px; z-index: 1}
.mainbak{position: absolute;top:240;width: 200px;height: 200px;border:1px solid #fff;z-index: 0;
}
#clipBtn{position: absolute;right:0;top:0;width: 50px;height: 50px;border:1px solid #fff;z-index: 0;
}
</style>
</head>
<!--
#preview #img4{position: absolute;top:0;left:0;}
-->
<body>
<div id="box" class="box">
<div class="main" id="main">
<canvas id="myCanvas" width="200" height="200"
style="border:1px solid #FF0000;">
你的浏览器不支持HTML5.
</canvas>
<div id="left-up" class="minDiv left-up"></div>
<div id="left-down" class="minDiv left-down"></div>
<div id="right-up" class="minDiv right-up"></div>
<div id="right-down" class="minDiv right-down"></div>
</div>
</div>
<div class="mainbak" id="mainbak">
<!----> <img id="imgbak" class="imgbak" src="" />
</div>
<div id="preview">
<img id="img4" class="img4" src="" />
<div id="view"></div>
</div>
<button id="clipBtn" onclick="testBtn()" >截取</button>
<div id="log"></div>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="hammer.min.js"></script>
<script type="text/javascript" src="jcanvas.min.js"></script>
<script>
/*//原canvas
var canvas=document.getElementById("myCanvas");
var ctx1=canvas.getContext("2d");
var image1=new Image()
image1.onload = function () //确保图片已经加载完毕
{
//cxt.drawImage(img,0,0);
// regular rotation about center
var xpos = canvas.width/2;
var ypos = canvas.height/2;
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.save();
ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);//旋转47度
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.restore();
}
image1.src="1.png";
*/
drawTheCanvas('1.png',0,0,0,1);
/**
jcanvas插件 手势触发其重绘
*/
function drawTheCanvas(_src,_startX,_startY,_rotate,_scale){
$('#myCanvas').clearCanvas();
$('#myCanvas').drawImage({
source: _src,
x: _startX,
y: _startY,
//width: 1000,height: 700, //默认图片宽高
fromCenter: false,
rotate: _rotate,
scale: _scale
})
.restoreCanvas();
}
var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var log = document.querySelector("#log");
var el = document.querySelector("#myCanvas");//img3 imgbak
var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
START_X=0;
START_Y=0
var ticking = false;
var transform; //图像效果
var timer;
var initAngle = 0; //旋转角度
var initScale = 1; //放大倍数
var mc = new Hammer.Manager(el); //用管理器 可以同时触发旋转 拖拽 移动
//var mc = new Hammer(el); //旋转和移动互斥
/**
ev.srcEvent.type touchstart touchend touchmove
ev.deltaX 手势移动位移变量
*/
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
//结束时做一些处理
mc.on("hammer.input", function(ev) {
if(ev.isFinal) {
//console.log(START_X+" "+transform.translate.x +" "+ev.deltaX);
START_X = transform.translate.x ;
START_Y = transform.translate.y ;
}
});
mc.on("panstart panmove", onPan);
mc.on("rotatestart rotatemove rotateend", onRotate);
mc.on("pinchstart pinchmove", onPinch);
/**
第二次进入拖拽时 delta位移重置
移动时 初始位置startxy不动。delta增加
*/
function onPan(ev){
if(!ev.isFinal) {
el.className = '';
//console.log(START_X +" "+ START_Y +" | "+ev.deltaX +" "+ ev.deltaY);
transform.translate = {
x: START_X + ev.deltaX,
y: START_Y + ev.deltaY
};
requestElementUpdate();
}
}
function onPinch(ev){
if(ev.type == 'pinchstart') {
initScale = transform.scale || 1;
}
el.className = '';
transform.scale = initScale * ev.scale;
requestElementUpdate();
}
//旋转相关
var preAngle =0 ;
var tempAngleFlag=0;
var deltaAngle = 0;
var startRotateAngle = 0;
function onRotate(ev) {
//点下第二个触控点时触发
if(ev.type == 'rotatestart') {
startRotateAngle = ev.rotation ;
tempAngleFlag = 0 ;
}
if(ev.type == 'rotatemove'){
if(tempAngleFlag == 0){
preAngle = startRotateAngle;
tempAngleFlag ++;
}else{
deltaAngle = ev.rotation - preAngle;
el.className = '';
transform.rz = 1; //非0 垂直xy轴
transform.angle =initAngle + deltaAngle;
requestElementUpdate();
}
}
//旋转结束 记录当前图片角度
if(ev.type =='rotateend'){
initAngle = transform.angle;
}
}
function updateElementTransform() {
var value = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale(' + transform.scale + ', ' + transform.scale + ')',
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
];
value = value.join(" ");
//el.style.webkitTransform = value; /*为Chrome/Safari*/
//el.style.mozTransform = value; /*为Firefox*/
//el.style.transform = value; /*IE Opera?*/
ticking = false;
drawTheCanvas('1.png',transform.translate.x,transform.translate.y,transform.angle,transform.scale);
}
function requestElementUpdate() {
if(!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}
function logEvent(str) {
log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
}
/**
初始化设置
*/
function resetElement() {
el.className = 'animate';
transform = {
translate: { x: START_X, y: START_Y },
scale: 1,
angle: 0,
rx: 0,
ry: 0,
rz: 0
};
requestElementUpdate();
}
resetElement();
function testBtn(){
var base64 = $('#myCanvas')[0].toDataURL('image/png', 1);
$("#im
