现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧。代码如下:clip*{ padding:0; margin:0;} u...
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150; 好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码：代码如下: var selectObj = null; function ImageCrop(canvasId, im...
网页端 裁剪图片，不需要经过服务器。 这个是用 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.filterFil...
引用CSS/js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 引用js /js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.jshtmljQuery代码$("#mainimg_src", content).load(function () {crop($("#mainimg", content));});function crop($img) { //$img是//缩小比例var scalex =$img.width() / $("#mainimg_src").width();var scaley =$img.height() / $...
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件，它叫Croppie。 运行效果图：HTML 首先我们将相关js和css文件载入head中。接下来我们在页面上放置一个图片上传按钮，我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后，在#upload-demo展示上传图片，以及调用...
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下： 头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。 有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点： 1，居中显示，并且可拖拉，改变截取的大小 2，预览的图片，根拖拉的大小成比例。 以下是js代码，作了简单的封装jcrop 图...
本文是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割 jquery代码（必须在最后面引入） function showCutImg(showImg){var showImg = $(showImg);var changeInput = showImg.parents(.showImgDiv).siblings(.CutImage);var size = changeInput.siblings(.imgCoord).attr(ratio).split(*);var needWidth = size[0];var needHeight = size[1];var ratio = ...
几乎每一个网页是必备图片上传，图片裁剪功能，这里通过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...
<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.后台上传功能。那么这一次，只谈[放大]或[缩小]。[位置]和[上传]问题，下次，我再写下(因为那个插件代码太多，我也没看完，正在学习研究当中)。 ［"区域"：是宽*高，也就是面积；] ［"放大或缩小"：是一个比例值，通常我们说放大或缩小，都说放大或缩小百分之多少，或者说放大或缩小多少倍...
本文介绍了头像裁剪上传功能，用到的技术有 jQuery，springmvc，裁剪插件用的是jcrop（中间遇到很多坑，最终跨越）。图片上传步骤：1.用户选择图片2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好3.利用jcrop裁剪工具对图片进行裁剪并且实时预览4.点击确定按钮将裁剪用到的参...
/ * Goofy 2011-11-29 * 图像处理：根据传递过来的坐标参数，x,y,w,h,依次为选取的x坐标，y坐标，w宽度，h高度 通过imagecopy()方法将该区域copy至第一步创建的空白图像中 注意，在创建图像的时候要用imagecreatetruecolor()真彩色，不然用imagecreate()图片会失真 */ 自由图片剪切 无比例 <?php/*** Goofy 2011-11-29* 图像处理：根据传递过来的坐标参数，x,y,w,h,依次为选取的x坐标，y坐标，w宽度，h高度* 通过imagecopy()方法将...
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下： 头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。 有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点： 1，居中显示，并且可拖拉，改变截取的大小 2，预览的图片，根拖拉的大小成比例。 以下是js代码，作了简单的封装 <!DOCTY...