js base64与canvas base64

一、js base64

获取到上传的文件myfile,创建一个fileRead文件对象,使用readAsDataURL方法可以将读取到的文件编码成Data URL。文件加载成功后,e.target.result就是文件图片所对应的base64编码。直接赋值给img的src,就能显示图片。

<body>
        <input type="file" name="myfile" id="myfile" value="" onchange="sub()"/>
</body>
<script type="text/javascript">
   function sub(){
       var myfile = document.getElementById("myfile").files[0];
       var fileRead = new FileReader();
       fileRead.readAsDataURL(myfile);
        fileRead.onload = function(e){
                console.log(e);
                var base64 = e.target.result;
                console.log(base64);
                var img = new Image();
                img.src = base64;
                document.getElementsByTagName("body")[0].appendChild(img);
            }
   }
<script>

下面是onload里e对象打印的结果,可以看出e.target.result是文件图片的信息。


打印图

下面打印的是base64的编码,可以在img的src中直接引用,或者复制到浏览器搜索框里也能直接搜索图片。


base64

运行结果图如下:
B70AB62F-9251-4C48-BCB9-364E7A8B18F6.png

二、canvas base64

使用canvas画一个填充色为红色的矩形,试点按钮后,使用canvas.toDataURL方法:返回一个包含图片展示的 data URI 。可以使用type参数其类型,默认为 PNG 格式。把得到的base64编码赋给img的src,显示图片。

<body>
        <canvas id="mycanvas" width="500" height="500"></canvas>
        <button onclick="sub()">点击</button>
</body>
<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.fillStyle = "red";
        context.fillRect(100,100,100,100);
        function sub(){
            var base64 = canvas.toDataURL();
            console.log(base64);
            var img = new Image();
            img.src = base64;
            document.getElementsByTagName("body")[0].appendChild(img);
        }
</script>

结果图如下:


1BB0DDD2A17D8A72EC3FF604E221FF48.png

两种图片的base64的方法都很实用,项目开发中可能会遇到,今天来分享给大家。

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

推荐阅读更多精彩内容