写在前面

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

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

–而使用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. Java Web 常用在线api汇总（不定时更新）

    1.Hibernate API Documentation (3.2.2.ga) http://www.hibernate.org/hib_docs/v3/api/ 2.Spring Framewor ...

  2. C语言学习之第一个程序

    #include<stdio.h> int main() { printf("This is my first program!\n"); ; } 基本格式大致如下: ...

  3. PL/SQL Developer import and export database method and illustrate

    PL/SQL Developer import and export database method and illustrate   HOW WELL DO YOU KNOW THE APPLE U ...

  4. 如何在SAP CRM里创建和消费Web service

    Created by Wang, Jerry, last modified on Dec 19, 2014 The following steps demonstrates how to expose ...

  5. BZOJ3531:[SDOI2014]旅行(树链剖分)

    Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰 ...

  6. UVA 12333 大数，字典树

    题意:给一个数字,看他最小是第几个菲波那切数列的前缀. 分析: 大数模板就是吊哦. 将菲波那切数列前500个数字放到字典树上.注意插入的时候不能像普通一样,只在尾节点处标记,而是一路标记下去. #in ...

  7. 2018.11.18 Sturts2配置详解&常量配置进阶

    1.基于struts.xml 的节点参数配置 package节点 action节点 result节点 include节点 2.struts常量配置以及如何修改为自己的想要的配置 2.1struts默认 ...

  8. eclipce导出项目发布到tomcat

    1.右击项目-Except 2.在弹出框中输入“WAR file” 3.点击“next” 在Destinatin选择保存路径,即可 4.将保存的文件复制到tomcat下,启动tomcat之后,会自动解 ...

  9. 由inline-block小例子引申出的一些问题，及IE6、IE7兼容性解决方案

    使用场景分析: 常见的对块与块之间的横向排列处理 对同级所有元素使用display:inline-block; , 之后块与块直接会产生间隙问题 解决办法: 给父级设 font-size:0; 别高兴 ...

  10. react-native环境配置入坑指南.

    官方入门教程:https://reactnative.cn/docs/0.51/getting-started.html http://services.gradle.org/distribution ...