js img转换base64

本文来自  http://www.cnblogs.com/taxi/p/7717486.html

完全复制粘贴，就为了以后能快速的找到地方抄代码，这一块也是属于我经常忘掉的一块。

方法一:canvas

<script type="text/javascript">
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var dataURL = canvas.toDataURL("image/png");
            return dataURL
            // return dataURL.replace("data:image/png;base64,", "");
        }


        function main() {
            var img = document.createElement('img');
            img.src = './images/Game of Thrones.jpg';  //此处自己替换本地图片的地址
            img.onload =function() {
                var data = getBase64Image(img);
                var img1 = document.createElement('img');
                img1.src = data;
                document.body.appendChild(img1);
                console.log(data);
            }
        }
        main()
    </script>

 

方法二:FileReader  (推崇这种)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>通过filereader接口读取文件</title>
    <script type="text/javascript">
        function readAsDataURL()
        {
            if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
            {
                result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
                return false;
            }
            var file=document.getElementById("imagefile").files[0];
            if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
            {
                alert("请确保文件为图像文件");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e)
            {
                var result=document.getElementById("result");
                result.innerHTML='<img src="'+this.result+'" alt=""/>'
            }

        }
    </script>
</head>

<body>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
    <!-- 这里用来显示图片结果-->
</div>
</body>
</html>

 

posted @ 2018-01-19 16:53  灬安  阅读(474)  评论(0)  编辑  收藏  举报