写在前面

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

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

–而使用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. Android Proguard.flags LOCAL_PROGUARD_FLAGS

    在Android项目中用到JNI,当用了proguard后,发现native方法找不到很多变量,原来是被produard优化掉了.所以,在JNI应用中该慎用progurad啊. 解决办法: 1.在An ...

  2. 【Leetcode】【Easy】ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  3. netstat 和 lsof 查看网络状态

    netstat和lsof都是linux下的工具,可以用于查看系统的网络状态. netstat netstat可以打印 网络连接,路由表,接口统计数据,还有多播和masquerade连接相关的东西(不熟 ...

  4. day3-基础 列表，元组，字典，模块

    1.列表 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 Country = ['China','England','America'] 通过下标访问列 ...

  5. 如何读写json文件

    代码如下: import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io. ...

  6. c++中的const用法（很详细）——转

    http://www.cnblogs.com/ymy124/archive/2012/04/16/2451433.html const给人的第一印象就是定义常量. (1)const用于定义常量. 例如 ...

  7. [转]JetBrains IntelliJ IDEA 13 Keygen (Java Source Code)

    转载:http://www.rover12421.com/2013/12/09/jetbrains-intellij-idea-13-keygen-java-source-code.html JetB ...

  8. 随机森林算法－Deep Dive

    0-写在前面 随机森林,指的是利用多棵树对样本进行训练并预测的一种分类器.该分类器最早由Leo Breiman和Adele Cutler提出.简单来说,是一种bagging的思想,采用bootstra ...

  9. hadoop二次排序

    import java.io.DataInput; import java.io.DataOutput; import java.io.File; import java.io.IOException ...

  10. c语言描述的快速排序法

    #include<stdio.h> #include<stdlib.h> void QuikSort(int a[],int m,int n){ //第一个数作为关键字,比他大 ...