cropper.js 剪切图片并上传的两种方式

方案一,上传图片和剪裁的参数,然后服务器端进行剪裁

//获取头像 
//1、input[type=file]有change的状态以后。
//2、读取文件给img src赋值并初始化cropper.js
avatarInputChange:function(event){
  this.avatar = event.target.files[0];

  var oFReader = new FileReader(),
  rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

  
  (function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }
    
    var oFile = document.getElementById("uploadImage").files[0];
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
    oFReader.readAsDataURL(oFile);
  })();

  var that = this;
  oFReader.onload = function (oFREvent) {
    that.avatar = oFREvent.target.result;

    document.getElementById("avatarImage").src = oFREvent.target.result;
    var image = document.querySelector('#avatarImage');
    that.cropper = new Cropper(image, {
      aspectRatio: 1/1,
      dragMode: 'move',
      autoCropArea: 0.50,
      restore: false,
      guides: false,
      center: false,
      highlight: false,
      cropBoxMovable: false,
      cropBoxResizable: false,
      toggleDragModeOnDblclick: false,
    });
  };

}
var cropperResult = this.cropper.getData();
var form = new FormData();
form.append("avatar",that.avatar);
form.append('x',cropperResult.x);
form.append('y',cropperResult.y);
form.append('width',cropperResult.width);
form.append('height',cropperResult.height);
this.$http({
    method: 'POST',
    url: this.server_path...,
    data: form
})
.then(function(response) {
})





方案二,直接使用canvas进行剪裁。然后发送canvas的base64代码,然后服务器根据代码生成


var s = this.cropper.getCroppedCanvas(); //生成

s = s.toDataURL("image/png");



//

//加载图片获取图片真实宽度和高度  

var image = new Image();  

image.onload=function(){  

    var width = image.width;  

    var height = image.height;  

    alert(width+'======'+height+"====="+f.size);  

};  

image.src= data;  


https://github.com/62006464/cropperjs#methods

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL


修改时间 2018-01-03

真诚赞赏,手留余香
赞赏
随机推荐
使用 sqlmap 检测 SQL 注入漏洞
php判断数组中是否存在指定键(key)的两种方法
ThinkPHP中,跳转方法在try..catch中使用注意
windows10删除OneDrive
vue.js 怎么给v-html指令绑定的数据添加样式
WordPress 不使用插件开发 RESTful API JWT 授权和验证
织梦分页样式
(转)关于百度地图和高德地图,关于地图坐标系
Nodejs路由实现方式和顺序
扫描二维码发送模板消息