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

  • 相关阅读:
    常用的VI/VIM命令
    那些年学过的一些算法
    huffman编码
    好用java库(一):java date/time api:jodatime
    linux启动
    ubuntu学习方式
    地址
    各种各样的软件
    jquery文件
    C变量与数据
  • 原文地址:https://www.cnblogs.com/ww03/p/8572269.html
Copyright © 2011-2022 走看看