zoukankan      html  css  js  c++  java
  • cropper图片剪裁 , .toBlob()报错

    问题描述:

      使用 cropper.js 剪裁图片时, 调用 toBlob() 方法报错

    $("#image").cropper('getCroppedCanvas').toBlob(function (blob){})

      报错信息:

       Uncaught TypeError: $(...).cropper(...).toBlob is not a function

    解决方法:

        /* 使用二进制方式处理dataUrl */
        function processData(dataUrl) {
            var binaryString = window.atob(dataUrl.split(',')[1]);
            var arrayBuffer = new ArrayBuffer(binaryString.length);
            var intArray = new Uint8Array(arrayBuffer);
            for (var i = 0, j = binaryString.length; i < j; i++) {
                intArray[i] = binaryString.charCodeAt(i);
            }
    
            var data = [intArray],
                blob;
    
            try {
                blob = new Blob(data);
            } catch (e) {
                window.BlobBuilder = window.BlobBuilder ||
                    window.WebKitBlobBuilder ||
                    window.MozBlobBuilder ||
                    window.MSBlobBuilder;
                if (e.name === 'TypeError' && window.BlobBuilder) {
                    var builder = new BlobBuilder();
                    builder.append(arrayBuffer);
                    blob = builder.getBlob(imgType); // imgType为上传文件类型,即 file.type
                } else {
                    console.log('版本过低,不支持上传图片');
                }
            }
            return blob;
        }

      最后调用代码:

        $('#cutBtn').click(function() {
            var data = $('#image').cropper('getCroppedCanvas', {
                     300, // 裁剪后的长宽
                    height: 300
                }),
                blob = processData(data.toDataURL());
    
            var formData = new FormData();
            formData.append('uploadImg', blob);
            $.ajax({
                url: '/path/to/upload',
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function() {
                    console.log('Upload success');
                },
                error: function() {
                    console.log('Upload error');
                }
            });
        });

    cropper.js 用法说明文档 

     https://github.com/fengyuanchen/cropperjs/blob/master/README.md

  • 相关阅读:
    话说 SVN 与 Git 之间的区别
    CentOS 7 之安装 Oracle 11gR2
    @meda媒体查询
    为样式找到应用目标-CSS选择器
    JQuery和原生JavaScript实现网页定位导航特效
    CSS代码缩写
    认识CSS样式
    文档类型、DOCTYPE切换和浏览器模式
    MIME 参考手册
    微格式(microformat)
  • 原文地址:https://www.cnblogs.com/ww03/p/8572269.html
Copyright © 2011-2022 走看看