关于图片转换问题 (file转base64 file转本地blob路径)

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

    //获取上传图片路径2
    getObjectURL: function (file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },


        //base64转file
        dataURLtoBlob: function (dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename = Math.random().toString(36).substr(2) + '.png';
            return new File([u8arr], filename, {
                type: mime
            });
        },

//网络路径转base64

function getImgToBase64(url, callback) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var img = new Image; //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
            img.crossOrigin = 'Anonymous';
            //要先确保图片完整获取到,这是个异步事件
            img.onload = function () {
                canvas.height = img.height; //确保canvas的尺寸和图片一样
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0); //将图片绘制到canvas中
                var dataURL = canvas.toDataURL('image/png'); //转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的
                callback(dataURL); //调用回调函数
                console.log(dataURL)//打印base64
                canvas = null;
            };
            img.src = url;
        }
本文最后更新于2019-12-2,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《关于图片转换问题 (file转base64 file转本地blob路径)》 发布于2019-12-2

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏