关于前端图片裁切并上传的使用总结!

今天拿到需求的时候是说,在前端上传一张图片,再上传之前需要对图片进行裁切,上传裁切之后的图片内容,当时我就有点纳闷,之前是有做过图片上传的一些开发,也略微直到一些图片上传的理论。

折腾了一天多的Jcrop,最后觉得用不了,API都看完了,最终还是需要将整张的图片上传到后台,然后再通过选取识别到的坐标以及宽度和高度传递给后台,后台在使用工具包进行处理,最终放弃。

我今天要说的是基于jquery的另一个强大插件cropper.js,在介绍这个插件之前我先整理一下我要实现的思路,之后我就不介绍cropper的API 了,详细的API文档请直接到官网查看,其实也有很多网站做了中文版的翻译,方便实惠。


实现思路

  • 第一步
    我们需要在一个页面中点击一个按钮来选择本地的文件,
  • 第二步
    选择完成之后,实现图片在页面中预览。
  • 第三步
    将我们预览的图片内容url传入到图片编辑器中,
  • 第四步
    开始图片编辑和选择,此处包括功能(选择框的大小任意缩放、背景图片的任意缩放和拖动)

    所以说cropper还是一个功能非常强大的插件,而Jcrop并不能做到背景图片的缩放和移动,而其他的还有很多编辑器,要不就是选取不能编辑,要不就是背景不能控制。

  • 第五步
    获取裁切的图片的信息

  • 第六步
    上传裁切后的图片

是的!直到目前为止,我们不需要依赖与后台的任何借口或操作,我们使用的纯前端做处理。

使用方法

引入文件

html中插入如下代码:

  1. <input type="file" name="" onchange="SelectImage(this)" value="请选择图片">
  2. <div class="container">
  3. <img id="EditImg" src="">
  4. </div>

这里当我们在input type="file"的值发生变化时,就会执行SelectImage方法如下:

  1. function SelectImage(file){
  2. if(file.files && file.files[0]) {
  3. var EditImg = document.getElementById("EditImg");
  4. var reader = new FileReader();
  5. reader.onload = function(evt) {
  6. //EditImgDOM.cropper("replace",evt.target.result);
  7. };
  8. reader.readAsDataURL(file.files[0]);
  9. } else {
  10. alert("图片加载失败...")
  11. }
  12. };

上面的readAsDataURL方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个dataURL格式的字符串(base64编码)以表示所读取文件的内容。

这时候我们页面上的<img id="EditImg" src="">标签就和衣玉兰我们想要的图片了,但是我们看到我们的SRC中是一个很长的base64变哪的内容,而不是我们的本地图片链接。

下面我们调用我们的cropper.js并做以简单的设置,我就一次性把全部的代码粘贴上来如下:

  1. <body>
  2. <input type="file" name="" onchange="SelectImage(this)" value="请选择图片">
  3. <div class="container">
  4. <img id="EditImg" src="">
  5. </div>
  6. <!-- dsads -->
  7. <button type="button" class="viweImg">预览图片</button>
  8. <img src="" class="viweImgBox">
  9. </body>
  10. <script type="text/javascript">
  11. var EditImgDOM = $("#EditImg");
  12. function SelectImage(file){
  13. if(file.files && file.files[0]) {
  14. var EditImg = document.getElementById("EditImg");
  15. var reader = new FileReader();
  16. reader.onload = function(evt) {
  17. // EditImg.src = evt.target.result;
  18. EditImgDOM.cropper("replace",evt.target.result);
  19. };
  20. /*该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
  21. */
  22. reader.readAsDataURL(file.files[0]);
  23. } else {
  24. alert("图片加载失败...")
  25. }
  26. };
  27. EditImgDOM.cropper({
  28. background:false,//是否在容器上显示网格背景。
  29. scalable: false,
  30. checkCrossOrigin: false,
  31. crop: function(data) {
  32. // 出来裁切后的图片数据.//只是单独的坐标和宽度高度
  33. },
  34. built: function () {
  35. EditImgDOM.cropper("event.dragType",90);
  36. }
  37. });
  38. // 点击预览图片
  39. $(".viweImg").on("click",function(){
  40. var imgData = EditImgDOM.cropper("getCroppedCanvas").toDataURL("image/jpeg");//获取base64位图片编码,toDataURL默认为png 格式图片
  41. $(".viweImgBox").attr("src",imgData);
  42. })

或者直接在我们的文档中直接引入文件,在复制内容代码即可运行,同时我们可以简单的添加一个样式

  1. body{
  2. background: #ffffff;
  3. }
  4. #EditImg{
  5. width: 100%;
  6. min-height: 300px;
  7. text-align: center;
  8. }
  9. #viweImgBox{
  10. width: 100%;
  11. }

页面也可以运行在手机上。

评论: