博客
关于我
canvas剪裁图片并上传,前端一步到位,无需用到后端
阅读量:400 次
发布时间:2019-03-05

本文共 1315 字,大约阅读时间需要 4 分钟。

背景:

     当前主流的图片剪裁主要有两种实现方式。

     1:flash操作剪裁。2:利用js和dom操作剪裁。

     目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台,

然后后台来执行剪裁。我一直觉得这样有很多问题:

     1.必须要先把图片上传到服务器然后才能执行后面的操作

     2.前后端交互太多,需要几次交互数据

 

老的实现方法太low了。我想试试canvas来实现剪裁,就网上搜索了下,是有一些canvas剪裁,类似Jcrop这种。但是我发现好多canvas的插件,

本质还是需要先上传到后台,最后还是后端剪裁,和之前的方式一样,只是用了canvas而已。

 

自己实现前端剪裁一步到位:

  后来我就想了想canvas能存储base64,就用base64传到后端。

      大致思路是这样的:

           -> 表单选择图片

    -> 读取图片,用FileReader获取到原图的base64码

    -> new 一个image,把base64传给src,然后就可以用这个对象

    -> 需要两个canvas,一个canvas是完整的在下层,一个canvas是我们要剪裁的区域在上层

      (因为canvas不能分层,两个重叠的canvas,下层那个canvas保持不动,上层显示我们要剪裁的区域)

      如图:黑色透明的是下层的原图,箭头指向的是上层显示区域。

      

    -> 上图的剪裁区域可以移动和放大,点击保存就会再用一个canvas把剪裁区域 按照原图大小画出来,最后把canvas对象用toDataURL()获取为base64码,就可以上传了。

 

实现起来有一些技术点:

      1.可以自定义 剪裁的图片的比例和最小尺寸,比如下面,设置了原图的宽高必须大于640px,同时剪裁的比例也始终为width :height,当前就是1:1

  

    this._option.crop_min_width = 640;    this._option.crop_min_height = 640;

  2.可以自定义 剪裁的容器大小,比如,你只希望它在某个小区域里执行剪裁,设置了这个大小后,会按照正确的比例,把原图缩放在这个容器里供用户操作

 

this._option.crop_box_width = 300;        this._option.crop_box_height = 200;

     3. 实现显示区域的拖动和显示区域的大小改变。

  4. 需要给剪裁容器包括里面的节点都添加上css3属性 user-select:none。否则会出现拖动的canvas的bug

  -webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none

  

代码写得很乱,封装的也不好,但是实现了想要的功能,点击保存会显示剪裁的图片按照原图比例,获取到的base64码会在控制台里打印出来。

 

默认要选择640*640以上的图片,以下是git地址,拉下来试试吧,也许这个方案是一个非常好的方式。

 

转载地址:http://zhxzz.baihongyu.com/

你可能感兴趣的文章
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
MySQL DBA 进阶知识详解
查看>>
Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)
查看>>
Mysql DBA 高级运维学习之路-DQL语句之select知识讲解
查看>>
mysql deadlock found when trying to get lock暴力解决
查看>>
MuseTalk如何生成高质量视频(使用技巧)
查看>>
mutiplemap 总结
查看>>
MySQL DELETE 表别名问题
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>