cropper.js 实现裁剪图片并上传(移动端)

最新推荐文章于 2024-08-08 08:27:43 发布

答题小程序制作

最新推荐文章于 2024-08-08 08:27:43 发布

阅读量6k

点赞数 2

分类专栏： js php 文章标签：移动端裁剪头像

本文链接：https://blog.csdn.net/kesixin/article/details/77603024

版权

php 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

博客地址： http://blog.mambaxin.com

上一篇文章已经编写了PC端的裁剪图片案例，这次是涉及移动端的头像裁剪更换，类似于微信更换头像功能。。。

案例下载：https://github.com/kesixin/Head_Cut_PC

思路跟PC端的案例是一样的，这里就不多说了。

将案例放到服务器上，如果出现上传失败可能是：
1.提交处理服务url出错：main.js

$(document.body).on('click', '[data-method]', function () {
      var data = $(this).data(),
          $target,
          result;

      if (data.method) {
        data = $.extend({}, data); // Clone a new one

        if (typeof data.target !== 'undefined') {
          $target = $(data.target);

          if (typeof data.option === 'undefined') {
            try {
              data.option = JSON.parse($target.val());
            } catch (e) {
              console.log(e.message);
            }
          }
        }

        result = $image.cropper(data.method, data.option);

        if (data.method === 'getCroppedCanvas') {
//          $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
//          alert(result.toDataURL('image/jpeg'));
//          $.post('/index.php/sdasdf',result.toDataURL('image/jpeg'),function(){},'json');
            var imgBase=result.toDataURL('image/jpeg');
            if(imgBase!=""){
                var data = {imgBase: imgBase};
                //提交地址
                $.post('../mobile/upload.php', data, function (ret) {
                    if(ret=='true'){
		                alert('上传成功');
		              }else{
		                alert('上传失败');
		              }
                }, 'text');
            }
        }
        
        if ($.isPlainObject(result) && $target) {
          try {
            $target.val(JSON.stringify(result));
          } catch (e) {
            console.log(e.message);
          }
        }

      }
    }).on('keydown', function (e) {

      switch (e.which) {
        case 37:
          e.preventDefault();
          $image.cropper('move', -1, 0);
          break;

        case 38:
          e.preventDefault();
          $image.cropper('move', 0, -1);
          break;

        case 39:
          e.preventDefault();
          $image.cropper('move', 1, 0);
          break;

        case 40:
          e.preventDefault();
          $image.cropper('move', 0, 1);
          break;
      }

    });

实现效果：