美文网首页
canvas截图 base64ToFile

canvas截图 base64ToFile

作者: 羊羊羊0703 | 来源:发表于2018-06-15 13:44 被阅读0次

    说明

    1、前端处理图片就是用canvas来做一个截图压缩的操作,上传后台要file文件,所以需要处理一下

    代码

    getImageFile: function(base64Codes) {
        var formData = new FormData();   // 加了参数,safari会报错
        //convertBase64UrlToBlob函数是将base64编码转换为Blob
        formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
                    
        return formData.get("imageName");
        /**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData){
            var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头,并转换为byte
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob( [ab] , {type : 'image/png'});
        }
    }
    

    相关文章

      网友评论

          本文标题:canvas截图 base64ToFile

          本文链接:https://www.haomeiwen.com/subject/bnxmeftx.html