用JavaScript实现图片切割效果实例资源-CSDN下载

共3个文件

js：2个

htm：1个

5星 · 超过95%的资源需积分: 50 165 浏览量 2008-12-31 12:18:31 上传评论收藏 9KB RAR 举报

在本文中，我们将深入探讨如何使用JavaScript来实现一个图片切割效果的实例。这个实例允许用户进行全透明设置、更换图片以及调整图片大小，为网页应用提供了丰富的交互性。JavaScript作为客户端脚本语言，在Web开发中扮演着至关重要的角色，尤其在处理动态效果和用户交互时。我们要理解图片切割的基本概念。图片切割通常是将一张大图分割成多个小图块，以便在网页上以更灵活的方式展示或进行其他操作。在JavaScript中，我们可以利用HTML5的Canvas元素和相关的API来实现这一功能。 1. **HTML5 Canvas**: Canvas是HTML5的一个重要组成部分，它是一个基于矢量图形的画布，允许开发者通过JavaScript进行绘图操作。在本实例中，我们将使用`<canvas>`元素来绘制切割后的图片。 2. **Canvas API**: JavaScript提供了丰富的Canvas API，如`createImageBitmap()`、`drawImage()`等，用于加载和绘制图像。`createImageBitmap()`可以将图片资源转换为位图对象，提高渲染性能；`drawImage()`则用于在Canvas上绘制图像，可以指定绘制的区域和位置。 3. **图片加载与尺寸设置**: 在JavaScript中，我们需要监听`window.onload`事件或者使用`img.onload`来确保图片完全加载后才进行切割操作。同时，可以通过`img.width`和`img.height`获取图片原始尺寸，根据需求设置图片大小。 4. **切割逻辑**: 实现图片切割，我们需要定义切割的规则，例如切割的行数和列数。然后，我们可以遍历这些规则，计算每个小块的坐标和大小，并使用`drawImage()`方法绘制到Canvas上。坐标计算公式通常为：`(x, y) = (column * widthPerBlock, row * heightPerBlock)`，其中`widthPerBlock`和`heightPerBlock`分别是单个区块的宽度和高度。 5. **透明度设置**: JavaScript可以通过Canvas API中的`globalAlpha`属性来设置整个画布的透明度。例如，`context.globalAlpha = 0.5;`可以使所有后续绘制内容具有50%的透明度。 6. **图片替换**: 可以通过改变`img.src`属性来替换图片源，然后重新执行切割和绘制的过程。记得每次更换图片后都要监听`onload`事件，确保新的图片加载完毕后再进行操作。 7. **交互性增强**: 用户可能需要调整图片大小或查看不同部分，为此我们可以添加拖动、缩放等交互功能。例如，可以监听`mousedown`、`mousemove`和`mouseup`事件来实现拖动，使用`scale()`方法实现缩放。在实际项目中，可能还需要考虑性能优化，如利用Web Workers进行复杂的计算，或者使用requestAnimationFrame进行平滑动画。同时，为了兼容不支持Canvas的浏览器，可以使用CSS精灵（CSS Sprites）或服务器端图片切割作为备选方案。总结来说，用JavaScript实现图片切割效果需要理解HTML5 Canvas的使用，熟练掌握Canvas API，以及对用户交互的处理。通过这样的实例，我们可以提升Web应用的用户体验，创造更加生动和丰富的视觉效果。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript实现图片切割效果实例.rar （3个子文件）

codefans.net

ImgCropper_sys

ImgCropper.htm 12KB

Resize.js 11KB

Drag.js 5KB

<!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 图片截取效果_demo_www.codefans.net</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, "up")); //最小范围限制 this.Min = !!this.options.Min; this.minWidth = Math.round(this.options.minWidth); this.minHeight = Math.round(this.options.minHeight); //设置缩放对象 this._resize = _resize; } //设置样式 this._Container.style.position = "relative"; this._Container.style.overflow = "hidden"; this._layHandle.style.zIndex = 200; this._layCropper.style.zIndex = 100; this._layBase.style.position = this._layCropper.style.position = "absolute"; this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//对齐 //初始化设置 this.Init(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//图片高度 Height: 0,//图片高度 //缩放触发对象 Resize: false,//是否设置缩放 Right: "",//右边缩放对象 Left: "",//左边缩放对象 Up: "",//上边缩放对象 Down: "",//下边缩放对象 RightDown: "",//右下缩放对象 LeftDown: "",//左下缩放对象 RightUp: "",//右上缩放对象 LeftUp: "",//左上缩放对象 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) //预览对象设置 Preview: "",//预览对象 viewWidth: 0,//预览宽度 viewHeight: 0//预览高度 }; Extend(this.options, options || {}); }, //初始化对象 Init: function() { //设置背景色 this.Color && (this._Container.style.backgroundColor = this.Color); //设置图片 this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url; //设置透明 if(isIE){ this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")"; } else { this._layBase.style.opacity = this.Opacity / 100; } //设置预览对象 this._view && (this._view.src = this.Url); //设置缩放 if(this.Resize){ with(this._resize){ Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight; } } }, //设置切割样式 SetPos: function() { var p = this.GetPos(); //按拖放对象的参数进行切割 this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; //设置预览 this.SetPreview(); }, //设置预览效果 SetPreview: function() { if(this._view){ //预览显示的宽和高 var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; //按比例设置参数 var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale; //设置预览对象 with(this._view.style){ //设置样式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割预览图 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } } }, //设置图片大小 SetSize: function() { var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图和切割图 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; //设置拖放范围 this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; //设置缩放范围 if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } }, //获取当前样式 GetPos: function() { with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } }, //获取尺寸 GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) { var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸对象 return { Width: iWidth, Height

评论收藏

内容反馈