使用pinchzoom实现头像剪裁
pinchzoom 官网 http://manuelstofer.github.io/pinchzoom/
PortraitClip.css
.pinch-page{position:fixed;top:0;bottom:0;left:0;right:0;display:none;width:100%;height:100%;background-color:#333;z-index:9;}
.pinch-page .top-mask,
.pinch-page .bottom-mask{position:absolute;left:0;top:0;right:0;display:block;background-color:rgba(0,0,0,0.6);z-index: 99;
}.pinch-page .bottom-mask{top:auto;bottom:0;
}.pinch-page .pinch-zoom-container{position:absolute!important;left:0;top:0;bottom:0;right:0;margin:auto;overflow: visible!important;z-index: 9;box-sizing: border-box;
}.pinch-page .pinch-zoom-container:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;display:block;width:100%;height:100%;z-index:999;border:1px solid #fff;box-sizing: border-box;
}.pinch-page .pinch-zoom{
}.pinch-page .pinch-zoom-p_w_picpath{display:block;width:100%;height:320px;background: no-repeat center center;background-size:contain;
}.pinch-page .operation-bar{position:absolute;left:0;right:0;bottom:0;display:block;height:60px;z-index: 999;background-color:rgba(51,51,51,0.6);
}
.pinch-page .operation-bar .cancel-btn{position:absolute;top:0;bottom:0;left:0;display:block;height:60px;line-height: 60px;font-size:16px;color:#fff;padding:0 20px;
}
.pinch-page .operation-bar .save-btn{position:absolute;top:0;bottom:0;right:0;display:block;height:60px;line-height: 60px;font-size:16px;color:#fff;padding:0 20px;
}
PortraitClip.js
(function($){/* ======================================== 页面渲染 ======================================== *//* ======================================== 不可变字段 ======================================== */var initialized = false; // 是否初始化var container = null;var clientWidth = $(window).width();var clientHeight = $(window).height();var pinchZoomImageWidth = clientWidth;var pinchZoomImageHeight = clientWidth;var maskHeight = (clientHeight-clientWidth)/2;var pinchZoom = null; // pinchZoom 对象/* ======================================== 可变字段 ======================================== */var p_w_picpathWidth = 0;var p_w_picpathHeight = 0;var xOffset = 0;var yOffset = 0;var originScale = 0;var p_w_picpath = null;var callback = null; // 加载完之后的回调// 构建DOMfunction render(){var html = "<div class='pinch-page'> "+" <em class='top-mask'></em> "+" <div class='pinch-zoom'> "+" <div class='pinch-zoom-p_w_picpath'></div> "+" </div> "+" <em class='bottom-mask'></em> "+" <div class='operation-bar'> "+" <a class='cancel-btn'>取消</a> "+" <a class='save-btn'>选取</a> "+" </div> "+"</div> ";$(html).appendTo("body");// 初始化 pinchZoompinchZoom = 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-p_w_picpath").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){return;}initialized = true;render();bindPageEvents();}/* ======================================== common-method ======================================== */// 刷新 头像剪裁容器function loadImage(originImage,loadCallback){if(!initialized){init();} // 如果未初始化则初始化callback = loadCallback;$(container).find(".pinch-zoom-p_w_picpath").css("background-p_w_picpath","url("+originImage+")");p_w_picpath = new Image();p_w_picpath.onload = function(){p_w_picpathWidth = p_w_picpath.width;p_w_picpathHeight = p_w_picpath.height;loadImageCallback();$(container).show();};p_w_picpath.src=originImage;}// 图像加载回调function loadImageCallback(){if(p_w_picpathWidth>p_w_picpathHeight){yOffset = (p_w_picpathWidth-p_w_picpathHeight)*pinchZoomImageWidth/p_w_picpathWidth/2;originScale = pinchZoomImageWidth/p_w_picpathWidth;}else{xOffset = (p_w_picpathHeight-p_w_picpathWidth)*pinchZoomImageWidth/p_w_picpathHeight/2;originScale = pinchZoomImageHeight/p_w_picpathHeight;}var minZoom = 1;if(xOffset!=0){minZoom = clientWidth/(clientWidth-2*xOffset);}if(yOffset!=0){minZoom = clientWidth/(clientWidth-2*yOffset);}// 初始化 pinchZoom 对戏那个pinchZoom.options.minZoom = minZoom;pinchZoom.options.tapZoomFactor = minZoom;pinchZoom.options.xOffset = xOffset;pinchZoom.options.yOffset = yOffset;var event = {touches:[{pageX:pinchZoomImageWidth/2,pageY:clientHeight/2}]};setTimeout(function(){pinchZoom.handleDoubleTap(event);},300);}// 剪裁图像function clipImage(scale,x,y,callback){// 创建 canvasvar canvasId ="canvas_"+new Date().getTime()+""+parseInt(Math.random()*10000);$("<canvas></canvas>").hide().attr("id",canvasId).appendTo("body");var canvas=$("#"+canvasId)[0];var ctx=canvas.getContext("2d");// 释放canvasfunction releaseCanvas(){$("#"+canvasId).remove();}// canvas 宽度 高度canvas.width = pinchZoomImageWidth;canvas.height= pinchZoomImageHeight;if(p_w_picpath.width>p_w_picpath.height){y=y-yOffset;}else{x=x-xOffset;}ctx.drawImage(p_w_picpath,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 result;}var PortraitClipUtil = {};PortraitClipUtil.loadImage=loadImage;window.PortraitClipUtil = PortraitClipUtil; })(jQuery);
测试页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Pinchzoom.js Demo</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes" /><link rel="stylesheet" href="css/common/PortraitClip.css" /><style>body{margin:0;}</style>
</head>
<body style="height:900px;"><button id="upload-p_w_picpath">上传图片</button><p_w_picpath id="p_w_picpath" style="position: absolute;display:block;top:0;z-index:9999;"/><script type="text/javascript" src="dist/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="dist/js/pinchzoom-xiaomin.min.js"></script><script type="text/javascript" src="js/common/PortraitClip.js"></script><script>$("#upload-p_w_picpath").click(function(e){PortraitClipUtil.loadImage("frog.jpg",function(dataURL){$("#p_w_picpath").attr("src",dataURL);});});</script>
</body>
</html>
注:这边引入的是pinchzoom-xiaomin.min.js。对pinchzoom.min.js源代码有所变更。pinchzoom.js,pinchzoom.min.js,pinchzoom-xiaomin.js,pinchzoom-xiaomin.min.js在相应的附件中。
转载于:https://blog.51cto.com/antlove/1844000
使用pinchzoom实现头像剪裁相关推荐
- 圆角头像剪裁php,PHP与JS实现头像剪裁功能架构总结
准备开发个头像上传及剪裁功能 想象的比较简单 没想到做起来这么费时间 – – 逻辑也要比我想象的多 下面简单说一下前后端的实现! 前端:主要是用JS 这里如果想偷懒的话推荐两个JQ jcrop和jsc ...
- jcrop java_JAVA spring+jcrop.js实现简单的头像剪裁
项目需求有个功能要实现头像,让我这个后端开发来做这个确实有点为难,结合网上大神的例子,做了个简单的功能,以备不时之需 实现效果 image.png 页面+js String path = reques ...
- 也说 Jquery+ASP.NET 实现开心网上传头像剪裁功能
前几天博客园cnblogs里有个朋友发了一个类似的帖子(你可以点这里查看),刚刚也要做这个功能,但是原来程序稍微有点问题,特别在前台上有几处不合理的地方,所以就着开心网的代码重写一下,效果如下 Ste ...
- Jquery+ASP.NET 实现开心网上传头像剪裁功能[转]
from:http://www.cnblogs.com/xuanye/archive/2008/09/25/1299091.html 前几天博客园cnblogs里有个朋友发了一个类似的帖子(你可以点这 ...
- Android图片选取和剪裁头像的相关问题
1.头像上传 头像上传是应用开发过程中非常常见的一个问题,一般涉及到用户注册的应用,都会有头像上传这样的一个功能,支付宝.QQ.微信.微博等等应用,都有这样一个功能.主要是作为用户识别使用,有时候看头 ...
- Uni-app + uview 个人信息页 上传、剪裁头像至服务器
AvatarCropper 头像裁剪 | uView - 多平台快速开发的UI框架 - uni-app UI框架 profile.vue > <template><view c ...
- android crop 大图,com.android.camera.action.CROP 实现图片剪裁
APP 中选取图片之后,有时候需要进行剪裁,比如头像. 以下是启动代码. 在我的项目中,传的是 filePath,所以我转了一下,但实际上从相册选择图片后,用 data.getData() 就可获得 ...
- 编写一个头像裁剪组件(一)
需求是编写一个头像剪裁工具再封装成为一个组件,然后根据功能开始逐步编写代码:先是上传图片 => 预览图片 => 编辑图片. 刚开始没有去考虑兼容性的问题,直接编写upload部分的代码,参 ...
- 实现微信公众号微信头像上传
这次我们做的项目需要实现一个微信公众号头像上传并且剪裁的功能,实在没有头绪,之后通过网上搜索和自己的修改实现了一个适合我们这个框架的方法. 首先本次项目我们的页面用的事velocity框架,页面代码是 ...
最新文章
- 针对JavaScript的常用事件、对象捕获和使用技巧
- web前端学习day_04:jQuery框架
- mysql里的ibdata1文件
- 将php数组存取到本地文件
- win7下 apache2.2 +php5.4 环境搭建
- android开发入门
- LeetCode 2171. 拿出最少数目的魔法豆(排序)
- Folder and jar
- html中电子邮件地址怎么写,电子邮件地址怎么写
- matlab计算prc曲线auc面积,ROC曲线及其matlab实现ROC曲线的绘画
- Andre Weil的一生
- Task01:基于逻辑回归的分类预测
- 第五节 结构化分析模型
- [经验教程]在拼多多上发起拼单和参与拼单有什么区别?
- win7修复计算机无鼠标,win7电脑鼠标不听使唤反应慢如何修复
- pytion基础语句之数据类型
- 解决了,佳能R6相机DAT/MP4视频文件修复卡顿无声问题
- 电脑处理器多核心好还是高频率好?
- 使用MindSpore报这个错是什么意思,RuntimeError: _Map_base::a
- 电话面试经历 - 负暄琐话 - CSDNBlog
热门文章
- 亲君圆梦,创业一起来
- embed的名词_常见名词解释
- 如何给页面加上loding_如何给片头添加字幕?视频剪辑大神们都这样玩
- python如何定义类_Python 面向对象
- 安卓怎么用抖音做锁屏_香港超级推荐全网霸屏快速上排怎么做
- vba 编辑combobox内容_初识Visual Basic编辑器并建立一段简单的代码
- Spring学习笔记:1(初步认识概念)
- linux查找项目中的问题,教你如何快速定位项目中慢查询[项目管理]
- 【java】兴唐第二十五节课(异常和log4j的使用)
- Springboot 日志管理模块编写记录