js 获取图片base64 兼容 ie

// 获取图片base 64
function getImgBase64(path, callback) {
    if (window.navigator.userAgent.indexOf("MSIE")>=1) {
        // ie
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var url = URL.createObjectURL(this.response);
            var img = new Image();
            img.onload = function () {
                // 此时你就可以使用canvas对img为所欲为了
                // ... code ...
                let canvas = document.createElement("canvas");
                //获取绘画上下文
                let ctx = canvas.getContext("2d");

                // 获取图片宽高
                let imgWidth = img.width;
                let imgHeight = img.height;

                //设置画布宽高与图片宽高相同
                canvas.width = imgWidth;
                canvas.height = imgHeight;

                //绘制图片
                ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
                //图片展示的 data URI
                let dataUrl = canvas.toDataURL('image/jpeg');
                callback ? callback(dataUrl) : '';

                // 图片用完后记得释放内存
                URL.revokeObjectURL(url);
                document.body.appendChild(canvas);
                // // 然后移除
                document.body.removeChild(canvas);
            };
            img.src = url;
        };
        xhr.open('GET', path, true);
        xhr.responseType = 'blob';
        xhr.send();
    } else {
        //   not ie 
        var img = new Image();
        img.src = path;
        img.setAttribute("crossOrigin", 'anonymous')

        //图片加载完成后触发
        img.onload = function () {
            let canvas = document.createElement("canvas");
            //获取绘画上下文
            let ctx = canvas.getContext("2d");

            // 获取图片宽高
            let imgWidth = img.width;
            let imgHeight = img.height;

            //设置画布宽高与图片宽高相同
            canvas.width = imgWidth;
            canvas.height = imgHeight;

            //绘制图片
            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
            //图片展示的 data URI
            let dataUrl = canvas.toDataURL('image/jpeg');
            callback ? callback(dataUrl) : '';

            document.body.appendChild(canvas);
            // // 然后移除
            document.body.removeChild(canvas);
        };
    }
}
微信截图_20191010161040.png

https://www.cnblogs.com/sunala/p/7085525.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天为又到学校了,大学再过一年,今晚又是一个人在宿舍,就像去年一样,提前隔一天到了,也是晚上,上次是晚上19.多到...
    ca3c阅读 379评论 0 0
  • 低头一看,猫儿半截身子已掩入裙摆,一双苍星石眼睛透着好奇与小心,眉弓凸起,表情竟显得胆怯中带着一丝严肃。结着蕾丝穗...
    牟大钊阅读 276评论 0 1
  • 第二个90天,我要持续践行达成以下目标: 1.固化熟悉线下课一阶内容 2.每天写晨间日记,列青蛙,每周三跑,写周检...
    嫣然自若阅读 309评论 1 0
  • 在自我处理体系中,对文字进行归纳、概括,提炼、结构化,甚至用自己的话先复述原文,是理解文章意思时极为重要的一点。 ...
    晨听阅读 736评论 0 2