caicaixiaoya
caicaixiaoya
  • 发布:2023-09-19 16:39
  • 更新:2023-09-19 16:39
  • 阅读:197

移动端上传图片转换为base64出错

分类:HBuilderX

<!-- Content -->
<div id="container">
<div class="img-container">
<h3 style="color: darkorange;">请稍等,若无响应请退出重新点击“选择图片”</h3>
<img crossorigin="anonymous" id="image" src="" style="background-color: #000000;">
</div>
</div>

    <!-- Scripts -->  
    <!-- <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script> -->  

    <Script src="../../js/jquery-3.5.1.min.js"></Script>  
    <Script src="../../js/jquery-3.5.1.js"></Script>  
    <script src="https://fengyuanchen.github.io/js/common.js"></script>  
    <script src="js/cropper.js"></script>  
    <script src="../../js/app.js"></script>  

    <script type="text/javascript">  
        mui.init();  
        var $image = $('#image');  
        $image.crossOrigin = "Anonymous";  
        mui.plusReady(function() {  
            var user = app.getUserGlobalInfo();  
            var faceImage = user.faceImageBig;  
            //跨域问题  

            $image.setAtrr  
            var imgURL = "";  
            // 获取屏幕宽度,设置图片  
            $image.attr('src', app.imgServerUrl + faceImage);  
            /** ======================== 从相册选择图片 ======================== **/  
                // 从相册中选择图片  
                console.log("从相册中选择图片:");  
                plus.gallery.pick( function(path){  
                    imgURL = path;  
                    $image.attr('src', path);  
                    faceCutter();  
                }, function ( e ) {  
                    mui.openWindow("index.html", "index.html");  
                }, {filter:"image"} );  

            /** ======================== 图片裁剪 ======================== **/  
            $("#cutter").on('tap', function() {  

                console.info("image::"+$image.src);  
                plus.nativeUI.showWaiting( "上传中..." );  

                $image.data('cropper');  
                $image.cropper.replace(dataBase);  
                var result = $image.cropper('getCroppedCanvas');  

                console.info(result.toDataURL());  
                var base64Url = "";   
                if(result){  
                    console.info("进入if中");  
                    try{  
                        base64Url = result.toDataURL();   
                    }catch(e){  
                        console.info(e);  
                    }  

                    // 上传头像  
                    var user = app.getUserGlobalInfo();   
                    console.info(user.id);  
                    console.info(imgURL);  
                    console.info("base64::"+base64Url);   
                    // 与后端联调  
                    mui.ajax(app.serverUrl + '/user/uploadFaceBase64',{  
                        data:{  
                            userId:user.id,  
                            faceData:base64Url  
                        },  
                        type:'post',//HTTP请求类型  
                        timeout:10000,//超时时间设置为10秒;  
                        headers:{'Content-Type':'application/json'},                    
                        success:function(data){  

这里的 $image.cropper('getCroppedCanvas').toDataURL()报错Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported,不清楚是为什么

2023-09-19 16:39 负责人:无 分享
已邀请:

要回复问题请先登录注册