你的位置:首页 > Java教程

[Java教程]微信图片上添加昵称等信息拖动移动位置


调用 

var oImg = document.getElementById("cropPosterImg");fnImageCropRot(oImg);

  

下载地址:http://www.zhangxinxu.com/study/down/jquery_jcrop_zh.zip

 

crop_rotation/zxx.crop_rotation.js

// zxx.crop_rotation.js by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/// 2010-05-06 v1.0 beta// 图片剪裁旋转前端展示/*一些说明:* 1. 旋转效果查看需通过在角度文本框中输入数值* 2. 后台处理图片需要5个参数,剪裁起始点,以及剪裁的高宽,这5个参数均可以通过id获取。其中角度值即旋转角度输入框的值,id为zxxRotAngle,坐标及高宽参数分别藏在4个隐藏的文本框中,id分别是:cropPosX, cropPosY, cropImageWidth, cropImageHeight* 3. 自动对比当前图片与原始图片尺寸比例,计算实际的剪裁值,对于高度及位置溢出也做了处理* 4. 如果出现由于图片旋转而发生遮挡的现象,设置遮挡元素的position属性为relative,z-index为1,可修复此问题* 5. 经我测试,excanvas.js需在头部加载以支持IE浏览器的canvas*/var fnImageCropRot = function(o){	//o为图片对象	if(typeof(o) === "object" && o.nodeName.toLowerCase() === "img"){//检测是否是图片类型的DOM对象		//当前显示图片的高度和宽度		var iCurWidth = o.width, iCurHeight = o.height;		o.height = iCurHeight;		//获取实际图片的高宽		var oCreateImg = new Image();		oCreateImg.src = o.src;		var iOrigWidth = oCreateImg.width, iOrigHeight = oCreateImg.height;		if(iCurWidth && iOrigWidth){//如果宽度为不为0 - 意味着加载成功			//计算当前与实际的纵横比			var scaleX = iCurWidth / iOrigWidth;			var scaleY = iCurHeight / iOrigHeight;			//实现图片对象的包裹			//创建包裹div			var oRelDiv = document.createElement("div");			oRelDiv.style.position = "relative";			oRelDiv.style.width = iCurWidth + "px";			oRelDiv.style.height = iCurHeight + 30 + "px";			oRelDiv.style.top = "30px";			//定义ID方法			var ID = function(id){				return document.getElementById(id);			};			//插入到当前图片对象之前			o.parentNode.insertBefore(oRelDiv, o);			//初始化坐标与剪裁高宽			var cropW = ID("ncropImageWidth").value;			var cropH = ID("ncropImageHeight").value;			var posX = ID("ncropPosX").value;			var posY = ID("ncropPosY").value;			var qrimg = ID("ncropQrcodeimg").value;			var nameTextX = ID("label_name_x").value;			var nameTexty = ID("label_name_y").value;			var nameTextSize = ID("label_name_fsize").value;			var addressTextx = ID("label_address_x").value;			var addressTexty = ID("label_address_y").value;			var addressTextSize = ID("label_address_fsize").value;			var avatarImg = ID("avatarImg").value;			var avatarx = ID("label_avatar_x").value;			var avatary = ID("label_avatar_y").value;			//剪裁需要的HTML元素			var sInnerHtml = '<div ><input id="zxxRotAngle" type="hidden" value="0" /><a scr="javascript:;" id="fnRefresh">刷新</a></div>'			+'<canvas id="zxxImageCanvas" ></canvas>'			+'<div id="zxxCropBox" >'				+'<div id="zxxDragBg" ></div>'				+'<div id="dragLeftTop" ></div>'				+'<div id="dragLeftBot" ></div>'				+'<div id="dragRightTop" ></div>'				+'<div id="dragRightBot" ></div>'				+'<div id="dragTopCenter" ></div>'				+'<div id="dragBotCenter" ></div>'				+'<div id="dragRightCenter" ></div>'				+'<div id="dragLeftCenter" ></div>'			+'</div>'			+'<div id="labelName" ><div id="labelNameDrag" >昵称拖动试试</div></div>'			+'<span id="labelAddress" ><span id="labelAddressDrag" >江苏 徐州</span></span>'			+'<span id="labelAvatar" ><img id="labelAvatarDrag" src="'+avatarImg+'"/></span>';			//嵌入HTML元素			oRelDiv.innerHTML = sInnerHtml;			//图片重新插入			var oCanvas = ID("zxxImageCanvas");			if(window.ActiveXObject){				//IE				oCanvas = window.G_vmlCanvasManager.initElement(oCanvas); //使IE支持动态创建的canvas元素			}			oRelDiv.insertBefore(o, oCanvas);			//---------------------------图片包裹装载完毕-----------------------			var fnCanvasRotate = function(canvas,img,rot){//canvas旋转角度的方法				//获取图片的高宽				var w = iCurWidth;				var h = iCurHeight;				//角度转为弧度				if(!rot){					rot = 0;					}				var rotation = Math.PI * rot / 180;				var c = Math.round(Math.cos(rotation) * 1000) / 1000;				var s = Math.round(Math.sin(rotation) * 1000) / 1000;				//旋转后canvas标签的大小				canvas.height = Math.abs(c*h) + Math.abs(s*w);				canvas.width = Math.abs(c*w) + Math.abs(s*h);				//绘图开始				var context = canvas.getContext("2d");				context.save();				//改变中心点				if (rotation <= Math.PI/2) {					context.translate(s*h,0);				} else if (rotation <= Math.PI) {					context.translate(canvas.width,-c*h);				} else if (rotation <= 1.5*Math.PI) {					context.translate(-c*w,canvas.height);				} else {					context.translate(0,-s*w);				}				//旋转90°				context.rotate(rotation);				//绘制				context.drawImage(img, 0, 0, w, h);				context.restore();				img.style.display = "none";				};			//侦听旋转角度输入框			ID("zxxRotAngle").onkeyup = function(){				var v = parseInt(this.value, 10);				if(!v){					v = 0;				}				//执行角度旋转				fnCanvasRotate(oCanvas, o, v);			};			//拖拽与拉伸方法			//拖拽拉伸所需参数			var params = {				left: 0,				top: 0,				width:0,				height:0,				currentX: 0,				currentY: 0,				flag: false,				kind: "drag",				activePoint: false			};			//获取相关CSS属性方法			var getCss = function(o,key){				return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 				};			var startDrag = function(point, target, kind){					//point是拉伸点,target是被拉伸的目标,其高度及位置会发生改变				//此处的target与上面拖拽的target是同一目标,故其params.left,params.top可以共用,也必须共用				//初始化宽高				params.width = getCss(target, "width");				params.height = getCss(target, "height");				//初始化坐标				if(getCss(target, "left") !== "auto"){					params.left = getCss(target, "left");				}				if(getCss(target, "top") !== "auto"){					params.top = getCss(target, "top");				}				//target是移动对象				point.onmousedown = function(event){					params.kind = kind;					params.flag = true;					if(!event){						event = window.event;					}					var e = event;					//焦点放到当前拖拽的对象					params.activePoint = target;					params.left = getCss(target, "left");					params.top = getCss(target, "top");					params.currentX = e.clientX;					params.currentY = e.clientY;					//防止IE文字选中,有助于拖拽平滑					point.onselectstart = function(){						return false;					}				};				document.onmouseup = function(){					params.flag = false;					if(getCss(params.activePoint, "left") !== "auto"){						params.left = getCss(params.activePoint, "left");					}					if(getCss(params.activePoint, "top") !== "auto"){						params.top = getCss(params.activePoint, "top");					}					if(params.activePoint.id=="labelName"){						//给隐藏文本框赋值						posX = parseInt(params.activePoint.style.left);						posY = parseInt(params.activePoint.style.top);						ID("label_name_x").value = posX;						ID("label_name_y").value = posY;						return;					}else if(params.activePoint.id=="labelAddress"){						//给隐藏文本框赋值						posX = parseInt(params.activePoint.style.left);						posY = parseInt(params.activePoint.style.top);						ID("label_address_x").value = posX;						ID("label_address_y").value = posY;						return;					}else if(params.activePoint.id=="labelAvatar"){						//给隐藏文本框赋值						posX = parseInt(params.activePoint.style.left);						posY = parseInt(params.activePoint.style.top);						ID("label_avatar_x").value = posX;						ID("label_avatar_y").value = posY;						return;					}					params.width = getCss(params.activePoint, "width");					params.height = getCss(params.activePoint, "height");					//给隐藏文本框赋值					posX = parseInt(params.activePoint.style.left);					posY = parseInt(params.activePoint.style.top);					cropW = parseInt(params.activePoint.style.width);					cropH = parseInt(params.activePoint.style.height);					if(posX < 0){						posX = 0;						}					if(posY < 0){						posY = 0;					}					if((posX + cropW) > iCurWidth){						cropW = iCurWidth - posX;						}					if((posY + cropH) > iCurHeight){						cropH = iCurHeight - posY;						}					//比例计算					posX = posX / scaleX;					posY /= scaleY;					cropW /= scaleX;					cropH /= scaleY;					//赋值					ID("ncropPosX").value = posX;					ID("ncropPosY").value = posY;					ID("ncropImageWidth").value = cropW;					ID("ncropImageHeight").value = cropH;				};				document.onmousemove = function(event){					var e = event ? event: window.event;					if(params.flag){						var nowX = e.clientX, nowY = e.clientY;						var disX = nowX - params.currentX, disY = nowY - params.currentY;						if(params.kind === "n"){							//上拉伸							//高度增加或减小,位置上下移动							target.style.height = parseInt(params.height) - disY + "px";							target.style.width = parseInt(params.width) - disY + "px";						}else if(params.kind === "w"){//左拉伸							target.style.left = parseInt(params.left) + disX + "px";							target.style.width = parseInt(params.width) - disX + "px";							target.style.height = parseInt(params.height) - disX + "px";						}else if(params.kind === "e"){//右拉伸							target.style.width = parseInt(params.width) + disX + "px";							target.style.height = parseInt(params.height) + disX + "px";						}else if(params.kind === "s"){//下拉伸							target.style.height = parseInt(params.height) + disY + "px";							target.style.width = parseInt(params.width) + disY + "px";						}else if(params.kind === "nw"){//左上拉伸							target.style.left = parseInt(params.left) + disX + "px";							target.style.width = parseInt(params.width) - disX + "px";							target.style.top = parseInt(params.top) + disX + "px";							target.style.height = parseInt(params.height) - disX + "px";						}else if(params.kind === "ne"){//右上拉伸							target.style.top = parseInt(params.top) + disY + "px";							target.style.height = parseInt(params.height) - disY + "px";							//右							target.style.width = parseInt(params.width) - disY + "px";						}else if(params.kind === "sw"){//左下拉伸							target.style.left = parseInt(params.left) + disX + "px";							target.style.width = parseInt(params.width) - disX + "px";							//下							target.style.height = parseInt(params.height) - disX + "px";						}else if(params.kind === "se"){//右下拉伸							target.style.width = parseInt(params.width) + disX + "px";							target.style.height = parseInt(params.height) + disX + "px";						}else{//移动							params.activePoint.style.left = parseInt(params.left) + disX + "px";							params.activePoint.style.top = parseInt(params.top) + disY + "px";						}					}				}			};			//绑定拖拽			startDrag(ID("zxxDragBg"),ID("zxxCropBox"),"drag");			startDrag(ID("labelNameDrag"),ID("labelName"),"drag");			startDrag(ID("labelAddressDrag"),ID("labelAddress"),"drag");			startDrag(ID("labelAvatarDrag"),ID("labelAvatar"),"drag");			//绑定拉伸			startDrag(ID("dragLeftTop"),ID("zxxCropBox"),"nw");			startDrag(ID("dragLeftBot"),ID("zxxCropBox"),"sw");			startDrag(ID("dragRightTop"),ID("zxxCropBox"),"ne");			startDrag(ID("dragRightBot"),ID("zxxCropBox"),"se");			startDrag(ID("dragTopCenter"),ID("zxxCropBox"),"n");			startDrag(ID("dragBotCenter"),ID("zxxCropBox"),"s");			startDrag(ID("dragRightCenter"),ID("zxxCropBox"),"e");			startDrag(ID("dragLeftCenter"),ID("zxxCropBox"),"w");			//图片不能被选中,目的在于使拖拽顺滑			ID("zxxImageCanvas").onselectstart = function(){				return false;			};			o.onselectstart = function(){				return false;			};		}//if end	}//if end};

  excanvas.js

 

// Copyright 2006 Google Inc.//// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at////  http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// Known Issues://// * Patterns are not implemented.// * Radial gradient are not implemented. The VML version of these look very//  different from the canvas one.// * Clipping paths are not implemented.// * Coordsize. The width and height attribute have higher priority than the//  width and height style values which isn't correct.// * Painting mode isn't implemented.// * Canvas width/height should is using content-box by default. IE in//  Quirks mode will draw the canvas using border-box. Either change your//  doctype to HTML5//  (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)//  or use Box Sizing Behavior from WebFX//  (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)// * Non uniform scaling does not correctly scale strokes.// * Optimize. There is always room for speed improvements.// Only add this code if we do not already have a canvas implementationif (!document.createElement('canvas').getContext) {(function() { // alias some functions to make (compiled) code shorter var m = Math; var mr = m.round; var ms = m.sin; var mc = m.cos; var abs = m.abs; var sqrt = m.sqrt; // this is used for sub pixel precision var Z = 10; var Z2 = Z / 2; /**  * This funtion is assigned to the <canvas> elements as element.getContext().  * @this {HTMLElement}  * @return {CanvasRenderingContext2D_}  */ function getContext() {  return this.context_ ||    (this.context_ = new CanvasRenderingContext2D_(this)); } var slice = Array.prototype.slice; /**  * Binds a function to an object. The returned function will always use the  * passed in {@code obj} as {@code this}.  *  * Example:  *  *  g = bind(f, obj, a, b)  *  g(c, d) // will do f.call(obj, a, b, c, d)  *  * @param {Function} f The function to bind the object to  * @param {Object} obj The object that should act as this when the function  *   is called  * @param {*} var_args Rest arguments that will be used as the initial  *   arguments when the function is called  * @return {Function} A new function that has bound this  */ function bind(f, obj, var_args) {  var a = slice.call(arguments, 2);  return function() {   return f.apply(obj, a.concat(slice.call(arguments)));  }; } var G_vmlCanvasManager_ = {  init: function(opt_doc) {   if (/MSIE/.test(navigator.userAgent) && !window.opera) {    var doc = opt_doc || document;    // Create a dummy element so that IE will allow canvas elements to be    // recognized.    doc.createElement('canvas');    doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));   }  },  init_: function(doc) {   // create