sm2.js 图片Base64后加密，图片过大加密时卡死情况怎怎么解决

哪位大大给个思路

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>拍照上传</title>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="/js/sm2.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            height: 100%;
        }
        .content{
            padding:0.5rem;
            width: 300px;
            height: 200px;
            overflow: hidden;
            margin: auto;
            align-items: center;
            border-bottom: 1px #999 solid;
        }
        .container{
            background-color:#e7e7e7;
            margin: 0px auto;
        }
        .content_idcard{
            margin: auto;
            text-align: center;
            padding: 0.5rem 0;
        }
        .container p{
            font-size: 0.9rem;
            color:#999
        }
        .canvas{
            display: none;
            margin: auto;
            text-align: center;
            padding: 0.5rem 0;
        }
        .photograph{
            position:absolute;
            background-color:#e7e7e7;
            top: 50%;
            height: 50%;
            width:100%;
            padding: 0px;
            overflow: auto;
            z-index:999;
            display: none;
        }
        .content_video{
            background-color:#e7e7e7;
            display: none;
            width:100%;
            height: 100%;
        }
        .video{
            padding: 0px;
            margin: auto;
            width:100%;
            text-align: center;
        }
    </style>
</head>
<body>
<form id="mainForm">
    <div class="content" id="content" >
        <div class="container">
            <div id='face-empty-result' class="content_idcard" >
                <img style='width:10rem;' src="/images/camera.png" alt="身份证正面照" >
                <p>身份证正面照</p>
            </div>
            <!--描绘video截图-->
            <canvas id="canvas" class="canvas"></canvas>
        </div>
    </div>
    <div class="content_video" id="content_video">
        <div id="clipArea" style="border: 2px dashed cornflowerblue;position:absolute;"></div>
        <video id="video" class="video" autoplay="autoplay" webkit-playsinline="webkit-playsinline" ></video>
    </div>
    <div class="photograph" id="photograph" >
        <input type="button" id="capture" value="拍照" style="width: 80px; height: 80px;margin: 10px auto;display:block; background-color: #00FFFF; border-radius:50%;border: none">
    </div>
</form>
<script src="/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    let video = document.getElementById("video");
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let _clipArea = document.getElementById("clipArea");
    let pWidth = document.documentElement.clientWidth;   //屏幕宽度
    let pHeight = document.documentElement.clientHeight;  //屏幕高度

    window.onload=function() {
        var _content = document.getElementById("content");
        _content.style.width = (pWidth-40)+"px";
        _content.style.height = ((pWidth-40)/1.6)+"px";
        //alert("w:"+_content.style.width+",h:"+_content.style.height);
        document.getElementById("face-empty-result").addEventListener("tap", function(){
            _clipArea.style.width = (pWidth-40)+"px";
            _clipArea.style.height = ((pWidth-40)/1.6)+"px";
            _clipArea.style.top="1rem";
            _clipArea.style.left="1rem";
            getImage();
        });
        //注册拍照按钮的单击事件
        document.getElementById("capture").addEventListener("click", function () {
            //绘制画面
            // alert("w:"+video.style.width+",h:"+video.style.height);
            // context.drawImage(video,16,16,pWidth-20, (pHeight/2));
            // context.drawImage(video,0,0,pWidth, pHeight);
            document.getElementById("content").style.display="block";
            document.getElementById("canvas").style.display="block";
            document.getElementById("photograph").style.display="none";
            document.getElementById("content_video").style.display="none";
            document.getElementById("face-empty-result").style.display="none";
            submit();
        });
    };

    // 拍照
    function getImage() {
        //alert("调用摄像头");
        document.getElementById("content").style.display="none";
        document.getElementById("photograph").style.display="block";
        document.getElementById("content_video").style.display="block";
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        //默认使用前摄像头，强制使用后置摄像头如下设置
        let constraints = {video: { facingMode: {exact: "environment"}}};
        // let constraints = {video: { width: { ideal: 1280 },height: { ideal: 720 },facingMode: {exact: "environment"}}};
        // let constraints = {video: true};
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in video) {
                    video.srcObject = stream;
                } else {
                    // 防止在新的浏览器里使用它，应为它已经不再支持了
                    video.src = window.URL.createObjectURL(stream);
                }
                video.onloadedmetadata = function (e) {
                    video.play();
                };
            }).catch(function (err) {
            console.log(err.name + ": " + err.message);
        });
    }
    /**
     * 将图片压缩后返回base64格式的数据
     * @param {*} width 压缩后图片宽度
     * @param {*} height 压缩后图片高度
     * @param {*} qua //图片质量1-100
     */
    function compressImageTobase64(qua){
        let quality = qua ? qua / 100 : 0.8;
        let scale = 0.5;
        context.width = video.videoWidth * scale;
        context.height = video.videoHeight * scale;
        // alert("长："+video.videoWidth * scale+",宽："+video.videoHeight * scale);
        context.drawImage(video, 0, 0, context.width, context.height);
        return canvas.toDataURL('image/png',quality);//base64 格式
    }
    //提交
    function submit(){
        let stasrTime = new Date();
        // let plainText = 'ihep_公钥加密私钥解密1';
        // alert('加密前数据:'+plainText);
        // let plainText = canvas.toDataURL("image/png", 0.2);
        let plainText = compressImageTobase64(50);
        alert("图片长度："+plainText.length);
        let publicKeyString = "0452712EBA7FE2C9615F6DE59C6EF662R085BD52B25952597CC95014BB8F201987F8D818EFFE710DBEC08FE2E4C7E3E0113EEBAB4B0E8B044E1A3CC8B149D76BE7";
        const cipherMode = 1;    // 1 - C1C3C2，0 - C1C2C3
        let size = 1000;     //分割每条最少长度
        let plainArray = [];
        // 我这里使用的是encryptlong进行RSA加密，是可以加密很长的字符串
        if (plainText.length < size) {
            let encrypted = sm2.doEncrypt(plainText, publicKeyString, cipherMode);
            plainArray.push(encrypted);
        }else {
            let count = Math.ceil(plainText.length / size);
            for (let i = 0; i <= count; i++) {
                if (i === 0) {
                    plainArray.push(sm2.doEncrypt(plainText.substring(i, size), publicKeyString, cipherMode));
                } else if (i > 0 && i < count) {
                    plainArray.push(sm2.doEncrypt(plainText.substring((i * size), (i + 1) * size), publicKeyString, cipherMode));
                } else {
                    plainArray.push(sm2.doEncrypt(plainText.substring((i * size), plainText.length), publicKeyString, cipherMode));
                }
            }
        }

        //**解密**
        // var decrypt = new JSEncrypt();
        // decrypt.setPrivateKey("");  //设置私钥
        // var uncrypted = decrypt.decrypt(encrypted);  //使用私钥解密刚才用公钥加密的密文
        // alert('解密后数据:'+uncrypted);
        $.ajax({
            async : false,
            cache : false,
            traditional: true,
            url: '/verification2',
            type: 'post',
            dataType: 'text',
            data: {
                eparam:plainArray,
                rid:"[[${rid}]]",
                eparam2:plainText
            },
            cache: false,
            async: true,
            success: function (rs) {
                let endTime = new Date();
                alert("耗时："+((endTime-stasrTime)/1000)+"秒，\n\t返回结果："+rs);
                console.log(plainText);
            },error : function(e) {           //请求失败的回调函数
                alert("访问异常"+e.message);
            }
        });
    }


</script>
</body>
</html>