几乎每一个网页是必备图片上传，图片裁剪功能，这里通过cropbox.js插件实现该功能。 <script src="js/jquery-1.11.1.min.js"></script> <script src="js/cropbox.js"></script> <script type="text/javascript">$(window).load(function() {var options ={thumbBox: .thumbBox,spinner: .spinner,imgSrc: images/avatar.png}var cropper = $(.imageBox).cropbox(options);$(#file).on(change, function(){var reader = new FileRea...
上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例： 首先，要知道我们应该实现什么功能？ （1）图片能够实现上传预览功能 （2）拖拽裁剪图片，使其能够显示裁剪后的区域 （3）显示要裁剪区域的坐标 其次，该如何引用该插件呢？ 那就具体看一下吧！ 第一步：先将样式和文件包引入（根据你自己的位置引入）<!--引入imgareaselect的css样式--> <link rel="stylesheet" type="text/css" hre...
最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像（用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小）。这个功能的需求是：头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸，那么这整张图片都会作为头像。如果大于规定的尺寸，那么用户可以选择要裁剪的区域。用户点击确定按钮，就将裁剪得到的图片数据发送到服务器，在后端将图片数据保存成一个文件。 要完成上述功能，涉及...
1.自定义宽高效果1.html 代码 index.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="./jquery-1.12.4.min.js"></script> </head> <body> <img class="source" src="./test2.jpg" alt=""> <img src="" class="target" alt=""> </body> </html> 2.添加插件代码 (function ($) {$.fn.photoCrop=function (option) {var opt={img:,fixedScale:9/5,isHead:null,maxWidth:140...
因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的IE浏览器，所以不得不使用后台进行裁剪。 这次使用到imgareaselect 插件获取需要裁剪区域的坐标，再由后台进行裁剪操作。先上个效果图再说但是这里有一个坑就是上传的图片过大，可能会造成裁剪的区域跟插件中显示的不一样，所以得现在后台对云图片进行压缩在裁剪。 /** * 等比例压缩算法： * 算法思想：根据压缩基数和压缩比来压缩原图，生产一张图片效果...
<body><div class="container demo"><div class="big"><p class="instructions">大图预览</p><div class="bigframe"><img width="300" height="300" src="images/resized_pic.jpg" alt="" /></div></div><div class="small"><p>小图缩放</p><div class="smallframe" ><div class="pre" id="preview"><img src="images/resized_pic.jpg" alt="" /></div></div></div></div> </body>先总结一下：最近练手，写了一些小东西，都是网上已...
这个应用的关键：1.让左边选择区域和右边显示的图像信息保持一至。2.根据左边选择区域的大小，来让右边有一个对局部放大或缩小的效果。 3.后台上传功能。那么这一次，只谈[放大]或[缩小]。[位置]和[上传]问题，下次，我再写下(因为那个插件代码太多，我也没看完，正在学习研究当中)。 ［"区域"：是宽*高，也就是面积；] ［"放大或缩小"：是一个比例值，通常我们说放大或缩小，都说放大或缩小百分之多少，或者说放大或缩小多少倍...
最后的效果如下：这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个功能的实现： 1. 拖拽显示图片 拖拽读取的功能主要是要兼听html5的drag事件，这个没什么好说的，查查api就知道怎么做了，主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。 var handler = { init: function($container){ //需要把dragover的默认行为禁掉，不然会跳页 $container....
下面是我自己写的图片裁剪的功能介绍： 可以利用鼠标拖拉，产生裁剪框可以改变裁剪框大小点击确定，返回裁剪数据原理完成裁剪的方法有两种： 1、利用HTML5新增拖拽事件drag drop等2、传统方法，利用鼠标事件，mousedown、mousemove等在这里，我们采用方法2。 裁剪区域的形成要进行裁剪首先要形成裁剪区域，这个裁剪区域的形成我们可以与鼠标移动的距离相关联。鼠标移动多远，裁剪区域就有多大。如下图：如上图所示鼠标的横向移动距...
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下： 头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。 有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点： 1，居中显示，并且可拖拉，改变截取的大小 2，预览的图片，根拖拉的大小成比例。 以下是js代码，作了简单的封装 <!DOCTY...
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件，它叫Croppie。 运行效果图：HTML 首先我们将相关js和css文件载入head中。<script src="jquery.min.js"></script> <script src="croppie.min.js"></script> <link rel="stylesheet" href="croppie.css"> 接下来我们在页面上放置...
smartcrop.js 是一个裁图不会裁掉人脸的 JS 插件 今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js。它是一款图片处理的智能裁剪库。在很多项目开发中，经常会遇见上传图片的场景，它可能是用户照片信息，也可能是商品图片等。然而在网页布局中，为了更好的用户体验，它们往往都需要一些宽度和高度的限制。对于不合适的图片，常常需要为用户提供一种裁剪方式，以此来满足网站更好的用户体验。但是图片默认的裁剪区...
网页端 裁剪图片，不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。 核心代码：var el = $(input).get(0);seajs.use([gallery/jcrop/0.9.12/jcrop.css,gallery/jcrop/0.9.12/jcrop.js] ,function(){FileAPI.event.on(el, change, function (evt){var files = FileAPI.getFiles(evt); // Retrieve file listFileAPI.filterFiles(files...
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150; 好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码：代码如下: var selectObj = null; function ImageCrop(canvasId, im...
现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧。代码如下: <!DOCTYPE html> <html xmlns="...