写在前面

–公司有这个需求，安排调查

–目前各大网站都是采用的-前端做裁剪返回坐标-由后端来做到裁剪

–而使用html-canvas画布可以直接前端裁剪并返回base64流-ajax可以直接下载保存

上代码：

注意配置好依赖-有一张png图片依赖

<!DOCTYPE html>

<html lang="en">

      <head>

            <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

            <title></title>

            <link rel="stylesheet" href="css/jquery.Jcrop.min.css" />

            <script src="js/jquery.min.js" type="text/javascript"></script>

            <script src="js/jquery.Jcrop.min.js" type="text/javascript" charset="utf-8"></script>

            <script>

                  $(function() {

                        var imgUrl;

                        $('input[type=file]').change(function() {

                              var file = this.files[0];

                              var reader = new FileReader();

                              reader.onload = function() {

                                    // 通过 reader.result 来访问生成的 DataURL

                                    var url = reader.result;

                                    setImageURL(url);

                              };

                              reader.readAsDataURL(file);

                        });

                        var image = new Image();

                        function setImageURL(url) {

                              image.src = url;

                              image.id = "target";

                              $("#img").append(image);

                              var cut = document.getElementById("cut");

                              var ctx = cut.getContext("2d");

                              image.onload = function() {

                                    $('#target').Jcrop({

                                          setSelect:[0, 0, 400, 400],

                                          maxSize: [400, 400],

                                          minSize: [400, 400],

                                          onChange: updatePreview,

                                          onSelect: updatePreview,

                                          aspectRatio: 1

                                    });

                                    //裁剪过程中，每改变裁剪大小执行该函数

                                    function updatePreview(c) {

                                          if(parseInt(c.w) > 0) {

                                                ctx.drawImage(image, c.x, c.y, c.w, c.h, 0, 0, 400, 400);

                                                imgUrl = cut.toDataURL("image/png");

                                                //.replace("image/png", "image/octet-stream")

                                                console.log(c.x, c.y, c.w, c.h);

                                          }

                                    };

                              }

                        }

                        $("#submit").click(function(){

//                            console.log(imgUrl);

                              $.post("#",{img:imgUrl},function(result){

                              alert("OK");

                              });

                              window.location.href = imgUrl;

                        })

                  })

            </script>

      </head>

      <body>

            <canvas id="cut" width="400" height="400"></canvas>

            <input type="file" />

            <div id="img"></div>

            <input type="button" id="submit" value="submit"/>

      </body>

</html>


代码不是很长-基本已经做到最精简

使用Jcrop-canvas画布-制作前端图像裁剪的更多相关文章

  1. 前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

    由于一个项目中需要用到用户头像上传裁剪组件,这两天便网上找了一些相关插件,主要由以下几种插件: 1.Image Cropper:http://elemefe.github.io/image-cropp ...

  2. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  3. 【开源】canvas图像裁剪、压缩、旋转

    前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...

  4. canvas图像裁剪、压缩、旋转

    转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...

  5. 【Web】前端裁剪图片，并上传到服务器（Jcrop+canvas）

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

  6. jQuery Jcrop 图像裁剪

    jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...

  7. 前端手势控制图片插件书写三（将transform变化应用在图片和canvas画布上）

    注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

随机推荐

  1. 《ArcGIS Runtime SDK for Android开发笔记》——（12）、自定义方式加载Bundle格式缓存数据

    随着ArcGIS 10.3的正式发布,Esri推出了新的紧凑型缓存格式以增强用户的访问体验.新的缓存格式下,Esri将缓存的索引信息.bundlx包含在了缓存的切片文件.bundle中.具体如下图所示 ...

  2. CSS3布局样式

    CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...

  3. Picklist的配置

    Picklist包括静态的Picklist和动态的Picklist.静态Picklist的配置 1.首先在All Projects中,选中Picklist,复制一个Pistlist进行修改.Name( ...

  4. 深入浅出 关于SQL Server中的死锁问题

    深入浅出 关于SQL Server中的死锁问题 博客2013-02-12 13:44   分享到:我要吐槽 死锁的本质是一种僵持状态,是多个主体对于资源的争用而导致的.理解死锁首先需要对死锁所涉及的相 ...

  5. 控制台执行java找不到或无法加载主类

  6. Python3基本数据类型（三、列表）

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字-它的位置,或索引,第一个索引是0,第二个索引是1,以此类推.Python有6个序列的内置类型,但最常见的是列表和元组.序列都可以进 ...

  7. 【转载】#446 - Deciding Between an Abstract Class and an Interface

    An abstract class is a base class that may have some members not implemented in the base class, but ...

  8. BZOJ1033:[ZJOI2008]杀蚂蚁antbuster(模拟)

    Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右 下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的 ...

  9. 【BZOJ4573】[ZJOI2016] 大森林（LCT）

    点此看题面 大致题意: 有\(n\)棵树,初始各有\(1\)个编号为\(1\)的节点,且其为生长节点.\(3\)种操作:将\([l,r]\)区间内的树增加一个新的编号的节点,修改\([l,r]\)区间 ...

  10. POJ 3734 生成函数

    题意:一排n长度的砖,有四种颜色,红色绿色是偶数,有少染色方式. 分析: 泰勒展开式: chx = (e^x+e^(-x))/2 = 1 + x^2/2! + x^4/4! + x^6/6! + .. ...