zoukankan      html  css  js  c++  java
  • img图片转成base64

    方法一:canvas

     <script type="text/javascript">
            var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
            //var img = "http://127.0.0.1/base64/1.jpg";
            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 ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
                var dataURL = canvas.toDataURL("image/" + ext);
                return dataURL;
            }
            var image = new Image();
            image.crossOrigin = '';
            image.src = img;
            image.onload = function () {
                var base64 = getBase64Image(image);
                console.log(base64);
            }
        </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>
    


    参考:https://cloud.tencent.com/developer/article/1399137
    https://www.cnblogs.com/tugenhua0707/p/4666076.html

  • 相关阅读:
    .NET开发微信公众号之创建自定义菜单
    FOR XML PATH 可以将查询结果根据行输出成XML格式
    Node入门
    javascript客户端检测技术
    理解OAuth 2.0(转)
    RESTful API 设计指南(转)
    forever让nodejs应用后台执行
    Git使用教程
    NodeJS基础教程
    windows系统下简单nodejs安装及环境配置
  • 原文地址:https://www.cnblogs.com/jessie-xian/p/11597862.html
Copyright © 2011-2022 走看看