使用pinchzoom实现头像剪裁_词汇网
使用pinchzoom实现头像剪裁
责任编辑：词汇网 发表时间： 15:32:40
pinchzoom 官网&http://manuelstofer.github.io/pinchzoom/ PortraitClip.css.pinch-page{&&&&position:&&&&top:0;&&&&bottom:0;&&&&left:0;&&&&right:0;&&&&display:&&&&width:100%;&&&&height:100%;&&&&background-color:#333;&&&&z-index:9;}.pinch-page&.top-mask,.pinch-page&.bottom-mask{&&&&position:&&&&left:0;&&&&top:0;&&&&right:0;&&&&display:&&&&background-color:rgba(0,0,0,0.6);&&&&z-index:&99;}.pinch-page&.bottom-mask{&&&&top:&&&&bottom:0;}.pinch-page&.pinch-zoom-container{&&&&position:absolute!&&&&left:0;&&&&top:0;&&&&bottom:0;&&&&right:0;&&&&margin:&&&&overflow:&visible!&&&&z-index:&9;&&&&box-sizing:&border-}.pinch-page&.pinch-zoom-container:before{&&&&content:"";&&&&position:&&&&top:0;&&&&bottom:0;&&&&left:0;&&&&right:0;&&&&display:&&&&width:100%;&&&&height:100%;&&&&z-index:999;&&&&border:1px&solid&#&&&&box-sizing:&border-}.pinch-page&.pinch-zoom{}.pinch-page&.pinch-zoom-image{&&&&display:&&&&width:100%;&&&&height:320&&&&background:&no-repeat&center&&&&&background-size:}.pinch-page&.operation-bar{&&&&position:&&&&left:0;&&&&right:0;&&&&bottom:0;&&&&display:&&&&height:60&&&&z-index:&999;&&&&background-color:rgba(51,51,51,0.6);}.pinch-page&.operation-bar&.cancel-btn{&&&&position:&&&&top:0;&&&&bottom:0;&&&&left:0;&&&&display:&&&&height:60&&&&line-height:&60&&&&font-size:16&&&&color:#&&&&padding:0&20}.pinch-page&.operation-bar&.save-btn{&&&&position:&&&&top:0;&&&&bottom:0;&&&&right:0;&&&&display:&&&&height:60&&&&line-height:&60&&&&font-size:16&&&&color:#&&&&padding:0&20}PortraitClip.js(function($){&&&&/*&========================================&页面渲染&========================================&*/&&&&/*&========================================&不可变字段&========================================&*/&&&&var&initialized&=&&//&是否初始化&&&&var&container&=&&&&&var&clientWidth&=&$(window).width();&&&&var&clientHeight&=&$(window).height();&&&&var&pinchZoomImageWidth&=&clientW&&&&var&pinchZoomImageHeight&=&clientW&&&&var&maskHeight&=&(clientHeight-clientWidth)/2;&&&&var&pinchZoom&=&&//&pinchZoom&对象&&&&/*&========================================&可变字段&========================================&*/&&&&var&imageWidth&=&0;&&&&var&imageHeight&=&0;&&&&var&xOffset&=&0;&&&&var&yOffset&=&0;&&&&var&originScale&=&0;&&&&var&image&=&&&&&var&callback&=&&//&加载完之后的回调&&&&//&构建DOM&&&&function&render(){&&&&&&&&var&html&=&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&取消&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&选取&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+&&&&&&&&&&&&&&&&&&&&"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&";&&&&&&&&$(html).appendTo("body");&&&&&&&&//&初始化&pinchZoom&&&&&&&&pinchZoom&=&new&RTP.PinchZoom($(".pinch-zoom"));&&&&&&&&//&添加遮罩&&&&&&&&$(".pinch-page&.top-mask").css("height",maskHeight+"px");&&&&&&&&$(".pinch-page&.bottom-mask").css("height",maskHeight+"px");&&&&&&&&$(".pinch-zoom-container,.pinch-zoom-image").css({&&&&&&&&&&&&"width":pinchZoomImageWidth+"px",&&&&&&&&&&&&"height":pinchZoomImageHeight+"px"&&&&&&&&});&&&&&&&&container&=&$(".pinch-page");&&&&}&&&&//&绑定事件&&&&function&bindPageEvents(){&&&&&&&&container.on("touchend",".save-btn",function(e){&&&&&&&&&&&&e.stopPropagation();&&&&&&&&&&&&e.preventDefault();&&&&&&&&&&&&var&transformCss&=&$(".pinch-zoom").css("-webkit-transform");&&&&&&&&&&&&var&positionInfo&=&retrievePositionInfo(transformCss);&&&&&&&&&&&&clipImage(positionInfo.scale,positionInfo.x,positionInfo.y,callback);&&&&&&&&&&&&$(container).hide();&&&&&&&&});&&&&&&&&container.on("touchend",".cancel-btn",function(e){&&&&&&&&&&&&e.stopPropagation();&&&&&&&&&&&&e.preventDefault();&&&&&&&&&&&&$(container).hide();&&&&&&&&});&&&&&&&&container.on("touchstart&touchmove&touchend",function(e){&&&&&&&&&&&&e.stopPropagation();&&&&&&&&&&&&e.preventDefault();&&&&&&&&});&&&&}&&&&//&初始化方法&&&&function&init(){&&&&&&&&if(initialized){&&&&&&&&&&&&&&&&&&&&}&&&&&&&&initialized&=&&&&&&&&&render();&&&&&&&&bindPageEvents();&&&&}&&&&/*&========================================&common-method&========================================&*/&&&&//&刷新&头像剪裁容器&&&&function&loadImage(originImage,loadCallback){&&&&&&&&if(!initialized){init();}&//&如果未初始化则初始化&&&&&&&&callback&=&loadC&&&&&&&&$(container).find(".pinch-zoom-image").css("background-image","url("+originImage+")");&&&&&&&&image&=&new&Image();&&&&&&&&image.onload&=&function(){&&&&&&&&&&&&imageWidth&=&image.&&&&&&&&&&&&imageHeight&=&image.&&&&&&&&&&&&loadImageCallback();&&&&&&&&&&&&$(container).show();&&&&&&&&};&&&&&&&&image.src=originI&&&&}&&&&//&图像加载回调&&&&function&loadImageCallback(){&&&&&&&&if(imageWidth>imageHeight){&&&&&&&&&&&&yOffset&=&(imageWidth-imageHeight)*pinchZoomImageWidth/imageWidth/2;&&&&&&&&&&&&originScale&=&pinchZoomImageWidth/imageW&&&&&&&&}else{&&&&&&&&&&&&xOffset&=&(imageHeight-imageWidth)*pinchZoomImageWidth/imageHeight/2;&&&&&&&&&&&&originScale&=&pinchZoomImageHeight/imageH&&&&&&&&}&&&&&&&&var&minZoom&=&1;&&&&&&&&if(xOffset!=0){&&&&&&&&&&&&minZoom&=&clientWidth/(clientWidth-2*xOffset);&&&&&&&&}&&&&&&&&if(yOffset!=0){&&&&&&&&&&&&minZoom&=&clientWidth/(clientWidth-2*yOffset);&&&&&&&&}&&&&&&&&//&初始化&pinchZoom&对戏那个&&&&&&&&pinchZoom.options.minZoom&=&minZ&&&&&&&&pinchZoom.options.tapZoomFactor&=&minZ&&&&&&&&pinchZoom.options.xOffset&=&xO&&&&&&&&pinchZoom.options.yOffset&=&yO&&&&&&&&var&event&=&{touches:[{pageX:pinchZoomImageWidth/2,pageY:clientHeight/2}]};&&&&&&&&setTimeout(function(){pinchZoom.handleDoubleTap(event);},300);&&&&}&&&&//&剪裁图像&&&&function&clipImage(scale,x,y,callback){&&&&&&&&//&创建&canvas&&&&&&&&var&canvasId&="canvas_"+new&Date().getTime()+""+parseInt(Math.random()*10000);&&&&&&&&$("").hide().attr("id",canvasId).appendTo("body");&&&&&&&&var&canvas=$("#"+canvasId)[0];&&&&&&&&var&ctx=canvas.getContext("2d");&&&&&&&&//&释放canvas&&&&&&&&function&releaseCanvas(){&&&&&&&&&&&&$("#"+canvasId).remove();&&&&&&&&}&&&&&&&&//&canvas&宽度&高度&&&&&&&&canvas.width&=&pinchZoomImageW&&&&&&&&canvas.height=&pinchZoomImageH&&&&&&&&if(image.width>image.height){&&&&&&&&&&&&y=y-yO&&&&&&&&}else{&&&&&&&&&&&&x=x-xO&&&&&&&&}&&&&&&&&ctx.drawImage(image,x/originScale,y/originScale,pinchZoomImageWidth/scale/originScale,pinchZoomImageHeight/scale/originScale,0,0,pinchZoomImageWidth,pinchZoomImageHeight);&&&&&&&&var&dataURL&=&canvas.toDataURL();&&&&&&&&if(callback!=null){&&&&&&&&&&&&callback(dataURL);&&&&&&&&}&&&&&&&&releaseCanvas();&&&&}&&&&//&获取&pinch-zoom&缩放&偏移信息&&&&function&retrievePositionInfo(transformCss){&&&&&&&&var&infoStr&=&transformCss.replace("matrix(","");&&&&&&&&infoStr&=&infoStr.replace(")","");&&&&&&&&var&arr&=&infoStr.split(",");&&&&&&&&var&scale&=&arr[0];&&&&&&&&var&x&=&arr[4];&&&&&&&&var&y&=&arr[5];&&&&&&&&if(x<0){&&&&&&&&&&&&x&=&-1*x;&&&&&&&&}&&&&&&&&if(y<0){&&&&&&&&&&&&y=-1*y;&&&&&&&&}&&&&&&&&var&result&=&{scale:scale,x:x/scale,y:y/scale};&&&&&&&&return&&&&&}&&&&var&PortraitClipUtil&=&{};&&&&PortraitClipUtil.loadImage=loadI&&&&window.PortraitClipUtil&=&PortraitClipU})(jQuery);测试页面&&&&Pinchzoom.js&Demo&&&&&&&&&&&&&&&&&&&&&&&&上传图片&&&&&&&&&&&&&&&&&&&&&&&&&&&&$("#upload-image").click(function(e){&&&&&&&&&&&&PortraitClipUtil.loadImage("frog.jpg",function(dataURL){&&&&&&&&&&&&&&&&$("#image").attr("src",dataURL);&&&&&&&&&&&&});&&&&&&&&});&&&&650) this.width=650;" src="/wyfs02/M00/86/91/wKioL1fD-lnTKyqzAAhseDbauOw019.jpg" title="e.jpg" alt="wKioL1fD-lnTKyqzAAhseDbauOw019.jpg" />注:这边引入的是pinchzoom-xiaomin.min.js。对pinchzoom.min.js源代码有所变更。pinchzoom.js,pinchzoom.min.js,pinchzoom-xiaomin.js,pinchzoom-xiaomin.min.js在相应的附件中。 词汇网声明本文技术文章来自：51cto
上一集:没有了 下一集:
相关文章：&&&&&&
最新添加资讯
24小时热门资讯
附近好友搜索RTP.PinchZoom.js
Double tap zoom
Support for AMD module loaders
Hardware acceleration, using 3D CSS transformations
Device support
It was developed for a webbased iPad application. So its well tested
on mobile Safari for iOS devices. Other devices might work as well but are currently
not tested.
RTP.PinchZoom.js depends on Underscore.js and jQuery.
It's possible to combine PinchZoom with other libraries like .
It cares about event bubbling: Unused touch events are bubbling up in
the DOM and can be handled by other libraries.
RTP.PinchZoom. you can redistribute it and/or modify it under
the terms of the .Pinchzoom.js 插件实现手指触摸图片放大缩小 - 博客频道 - CSDN.NET
forever_yours的专栏
分类：js效果
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Pinchzoom.js插件实现手指触摸图片放大缩小&/title&
.pinch-zoom,.pinch-zoom img{
width: 100%;
-webkit-user-drag:
-moz-user-drag:
-ms-user-drag:
user-drag:
&link rel=&stylesheet& href=&css/style.css& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&&
&!-- 代码部分begin --&
&div class=&page&&
& & & & &div class=&pinch-zoom&&
& & & & & & &div class=&description&&
& & & & & & & & &h1&Pinchzoom.js&/h1&
& & & & & & & & &p&Multi-touch zoom in Javascript&/p&
& & & & & & &/div&
& & & & & & &img src=&images/frog.jpg&/&
& & & & &/div&
& & &/div&
&script src=&js/jquery-1.7.2.min.js&&&/script&
&script src=&js/pinchzoom.js&&&/script&
&script type=&text/javascript&&
& &$(function () {
& & & &$('div.pinch-zoom').each(function () {
& & & & & &new RTP.PinchZoom($(this), {});
& & & &});
&!-- 代码部分end --&
forever_yours
排名：千里之外
（1）（1）（1）（1）（1）（1）}