js本地预览图片和转base64

最新推荐文章于 2024-05-31 15:00:13 发布

过8客

最新推荐文章于 2024-05-31 15:00:13 发布

阅读量5.9k

点赞数

分类专栏： javascript 文章标签： javascript 图片预加载本地图片预览

本文链接：https://blog.csdn.net/guo8ke/article/details/71195457

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

用代码说话：

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value;
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            return url;
        }


        function convertImgToBase64(url, callback, outputFormat){
            var canvas = document.createElement('CANVAS'),
                    ctx = canvas.getContext('2d'),
                    img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                canvas = null;
            };
            img.src = url;
        }

        /*
        convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){
            // Base64DataURL
        });
        */

    </script>
</head>
<body>
<img width="100" height="100" id="myimg">
<input type="file" id="myfile" >
<input type="button" id="submit" value="提交">


<script type="text/javascript">

    (function() {
                document.querySelector("#myfile").onchange = function(){
                    console.log(this.value);
                    document.querySelector("#myimg").src = getFileUrl(this.id);

                };

                document.querySelector("#submit").onclick = function(){
                    var fsrc;
                    fsrc = getFileUrl("myfile");
                    convertImgToBase64(fsrc, function(base64Img){
                        console.log('11111111111111111');
                        //console.log(base64Img);
                        // Base64DataURL
                    });
                };
            }
    )();
</script>

</body>
</html>

上面代码保存个html文件就可以了。

值得注意的是

window.URL 是访问本地硬盘或者sd卡

window.URL.createObjectURL  是把本地地址转换成一个http格式的地址。这样就不会提示浏览器安全权限问题了。

过8客

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js本地预览图片和转base64

js本地预览图片和转base64
复制链接

扫一扫

专栏目录

js本地预览图片和转base64

“相关推荐”对你有帮助么？