写在前面

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

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

–而使用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. Windows8中如何打包和安装一个本地的Metro类型应用（转）

    Windows8中如何打包和安装一个本地的Metro类型应用 (转自:http://software.intel.com/zh-cn/blogs/2012/05/09/windows8metro) 微 ...

  2. JUnit_BeforeClass不报异常的 bug 处理

    1.try{} cathce(Exception e){}将觉得会出问题的地方括起来测试. 2.main方法调用出问题的方法.

  3. Android学习——Fragment与Activity通信（二）

    接下来就要到Fragment向Activity传输数据了.主要的思路,就是在Fragment中创建一个回调接口,利用该回调接口实现Fragment向Activity传输数据的功能. 回调函数(接口) ...

  4. solidity语言3

    #函数类型(function type) function (<parameter types>) {internal|external(public)} [pure|constant|v ...

  5. GridView的分页代码

    1.前台代码 <PagerTemplate><div style="text-align:center; color:Blue"> <asp:Link ...

  6. Mysql Order By 注入总结

    前言 最近在做一些漏洞盒子后台项目的总结,在盒子多期众测项目中,发现注入类的漏洞占比较大.其中Order By注入型的漏洞也占挺大一部分比例,这类漏洞也是白帽子乐意提交的类型(奖金高.被过滤概率小). ...

  7. redis缓存技术在java中的应用

    https://blog.csdn.net/zhh1072773034/article/details/78538012

  8. 【Hibernate那点事儿】—— Hibernate应该了解的知识

    前言: 最近由于有点时间,就像深入的学习一下Hibernate.之前只是简单的使用,并没领会它的妙处.这里就趁着分享的机会,好好整理一下. 这篇主要讲到了下面几个部分: Hibernate框架 Hib ...

  9. 关于Oracle RAC节点间免密码策略

    在RAC安装过程中无论grid或是Oracle软件都需要配置节点间免密码策略.配置方法网上有很多,oracle和可以帮你配置,此处不多说. 但是在RAC运行过程中是不需要免密码登陆的,所以在集群安装完 ...

  10. 一、Python安装下载

    下载地址:https://www.python.org/downloads/ 因为Python3.X和2.X有部分不兼容,有些不向下兼容,现在3.5的资料和插件少,故我就学习的2.7.11了; 下载后 ...