写在前面

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

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

–而使用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. 向jsp页面传值时出现乱码

    在一个html页面中用表单向jsp页面传值: 这是html页面 <html> <head> <title>MyBeans.html</title> &l ...

  2. March 1 2017 Week 9 Wednesday

    If you are serious giving up something, giving up is not serious at all. 如果你慎重地决定要放弃,那么放弃本身就没什么大不了的. ...

  3. 【转】android的编译和运行过程深入分析

    首先来看一下使用Java语言编写的Android应用程序从源码到安装包的整个过程,示意图如下,其中包含编译.链接和签名等: (1)使用aapt工具生成R.java文件 可以先通过搭建好的Eclipse ...

  4. ACM/ICPC 2018亚洲区预选赛北京赛站网络赛 A、Saving Tang Monk II 【状态搜索】

    任意门:http://hihocoder.com/problemset/problem/1828 Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制:25 ...

  5. 2018.11.14 hibernate中的查询优化---关联级别查询

    查询优化------关联级别查询 集合策略 在Mapper映射文件中添加属性 测试数据 lazy:true 延时加载数据 fetch:select 单表查询 控制台显示输出 结论:单表查询,使用到在加 ...

  6. Cesium.js学习第一天（设置材质）

    var viewer = new Cesium.Viewer('cs'); var entity = viewer.entities.add({ position: Cesium.Cartesian3 ...

  7. 【洛谷P1582】倒水

    倒水 题目链接 显然,2^x个杯子里的水可以倒在一个杯子里 所以我们可以贪心地每次将N中最大的2^x减掉 减k次(若中途已经为0,直接输出0) 若大于0,用最小的比N大的2^x减剩下的N,即为答案 # ...

  8. 转载：C/C++ typedef用法

    原文链接:http://www.cnblogs.com/ggjucheng/archive/2011/12/27/2303238.html 引言 typedef 声明,简称 typedef,为现有类型 ...

  9. 【其它】Nook HD刷机

    很久以前的 Nook HD 平板刷机.只能用 microSD(TF)卡刷.需要的软件全都保存在了自己的百度网盘,自己亲测有效. 一.准备工作 1.首先,将tf卡格式化为fat32格式,实测可以使用.将 ...

  10. notepad++括号自动补全插件: XBracket Lite

    1.4.5.1. 通过XBracket Lite实现括号的自动补全 先去打开相应的设置: 再根据自己的需要去设置: 其中解释一下相应的选项的含义: Treat'' as brackets 把单引号', ...