JS-图片截取/缩放/拖动/透明-JavaSript-爱易网页

JS-图片截取/缩放/拖动/透明

日期：2014-05-16　浏览次数：20379 次

JS--图片截取/缩放/拖动/透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片截取效果</title>
</head>
<body>
<script type="text/javascript">
var isIE = (document.all) ? true : false;

var $ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
 create: function() {
  return function() { this.initialize.apply(this, arguments); }
 }
}

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun) {
 return function() {
  return fun.apply(object, arguments);
 }
}

var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
  //容器对象,控制层,图片地址
  initialize: function(container, handle, url, options) {
 this._Container = $(container);//容器对象
 this._layHandle = $(handle);//控制层
 this.Url = url;//图片地址
 
 this._layBase = this._Container.appendChild(document.createElement("img"));//底层
 this._layCropper = this._Container.appendChild(document.createElement("img"));//切割层
 this._layCropper.onload = Bind(this, this.SetPos);
 //用来设置大小
 this._tempImg = document.createElement("img");
 this._tempImg.onload = Bind(this, this.SetSize);
 
 this.SetOptions(options);
 
 this.Opacity = Math.round(this.options.Opacity);
 this.Color = this.options.Color;
 this.Scale = !!this.options.Scale;
 this.Ratio = Math.max(this.options.Ratio, 0);
 this.Width = Math.round(this.options.Width);
 this.Height = Math.round(this.options.Height);
 
 //设置预览对象
 var oPreview = $(this.options.Preview);//预览对象
 if(oPreview){
  oPreview.style.position = "relative";
  oPreview.style.overflow = "hidden";
  this.viewWidth = Math.round(this.options.viewWidth);
  this.viewHeight = Math.round(this.options.viewHeight);
  //预览图片对象
  this._view = oPreview.appendChild(document.createElement("img"));
  this._view.style.position = "absolute";
  this._view.onload = Bind(this, this.SetPreview);
 }
 //设置拖放
 this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true });
 //设置缩放
 this.Resize = !!this.options.Resize;
 if(this.Resize){
  var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) });
  //设置缩放触发对象
  op.RightDown && (_resize.Set(op.RightDown, "right-down"));
  op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));
  op.RightUp && (_resize.Set(op.RightUp, "right-up"));
  op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));
  op.Right && (_resize.Set(op.Right, "right"));
  op.Left && (_resize.Set(op.Left, "left"));
  op.Down && (_resize.Set(op.Down, "down"));
  op.Up && (_resize.Set(op.Up,

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS-图片截取/缩放/拖动/透明

相关资料更多>

推荐阅读更多>