1. <tfoot id='9h3kkmxu'></tfoot>

          <bdo id='o4eg9f4m'></bdo><ul id='cgca8dnw'></ul>
      1. <i id='d46vqbjt'><tr id='lkg3evgq'><dt id='n1h8x8c8'><q id='bvp58ofv'><span id='a4dg54b1'><b id='wjulxkmm'><form id='xnd01vkl'><ins id='xewf37fr'></ins><ul id='6u13b4tq'></ul><sub id='ja3gptp4'></sub></form><legend id='851we2nm'></legend><bdo id='nvoulgdx'><pre id='wl0872i5'><center id='42x3vcez'></center></pre></bdo></b><th id='dexzuod2'></th></span></q></dt></tr></i><div id='cn8fnqrp'><tfoot id='iiyxt3u4'></tfoot><dl id='lra34q2n'><fieldset id='elzj63ep'></fieldset></dl></div>

        <small id='97pkwcry'></small><noframes id='bqswxqo1'>

      2. <legend id='7i680vpv'><style id='i35jhd84'><dir id='ouapjson'><q id='l6arpid9'></q></dir></style></legend>
      3. 精准传达 • 价值共享

        洞悉互联网前沿资讯,探寻网站营销规律

        如何将图片转换base64格式?data:image/png;base64又是什么?

        作者: 庚午网络 | 2020-12-22 14:16 |点击:

            <tbody id='cexyv5ga'></tbody>
          • <i id='kbi0mrxh'><tr id='61ldasvy'><dt id='pup52y4e'><q id='5eaa6ngg'><span id='1pnofx0s'><b id='zhkpdep3'><form id='ak7rt2pd'><ins id='qr9d3sqf'></ins><ul id='jrlgp248'></ul><sub id='9suayij8'></sub></form><legend id='lwqkob4k'></legend><bdo id='f1mvxz1y'><pre id='bw3qmji2'><center id='qmdf7fzm'></center></pre></bdo></b><th id='7cxqcx82'></th></span></q></dt></tr></i><div id='g9175osj'><tfoot id='xf03abpe'></tfoot><dl id='ydiqk815'><fieldset id='enm7nxmg'></fieldset></dl></div>
            <legend id='ckxnegtp'><style id='wwxo1hhf'><dir id='wf5vaz8q'><q id='xuphvsph'></q></dir></style></legend>
            • <bdo id='o78bf4hr'></bdo><ul id='4xtkzucq'></ul>
                1. <small id='hzz7z0oy'></small><noframes id='3sv484l1'>

                  <tfoot id='yp46ur4a'></tfoot>
                2. 一、我们在看代码时经常在img或css背景图片中看到: 
                  src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus 
                  bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”
                   
                  src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具, 后面跟的一串代码就相当于链接地址。
                   
                  二、目前,Data URL scheme 支持的类型:
                   
                  data:,文本数据
                  data:text/plain,文本数据
                  data:text/html,HTML代码
                  data:text/html;base64,base64编码的HTML代码
                  data:text/css,CSS代码
                  data:text/css;base64,base64编码的CSS代码
                  data:text/JavaScript,Javascript代码
                  data:text/javascript;base64,base64编码的Javascript代码
                  data:image/gif;base64,base64编码的gif图片数据
                  data:image/png;base64,base64编码的png图片数据
                  data:image/jpeg;base64,base64编码的jpeg图片数据
                  data:image/x-icon;base64,base64编码的icon图片数据
                   
                  三、js将图片转化为base64(2种方法)
                   
                  利用canvas 将图片转化为base64 编码格式
                  var canvas = document.createElement("canvas");
                  var ctx = canvas.getContext('2d'),
                     img = new Image;
                     img.src="./vheider.jpg";
                   //  img.setAttribute('crossOrigin', 'anonymous')  // 图片跨域时有用
                     img.onload = function(){
                         canvas.height = img.height;
                         canvas.width = img.width;
                         ctx.drawImage(img,0,0);
                         dataURL =canvas.toDataURL("image/jpeg");
                   
                          $('#img').attr('src', dataURL);
                          console.log(canvas.toDataURL("image/jpeg"))
                   
                    };
                   
                  注意: 这里要在服务端打开,不然浏览器可能会报 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 错误
                   
                  2 . 利用 html5 的 FileReader 将图片转化base64格式 
                  FileReader 是H5提供的一个处理文件的API, 
                  ① 判断浏览器是否支持FileReader
                   
                  if(window.FileReader){
                      //处理文件
                  }else{
                     return "浏览器不支持FileRedaer"
                  }
                   
                  ② FileReader 接口有四个方法:
                   
                  readAsBinaryString (file) 将文件读取为二进制码 
                  readAsDataURL (file) 将文件读取为 DataURL 
                  readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式,一般默认是UTF-8) 
                  about 中断读取
                   
                  ③ FileReader还提供给了一些事件:
                   
                  onabort 中断时触发
                  onerror 出错时触发
                  onload 文件读取成功完成时触发
                  onloadend 读取完成触发,无论成功或失败
                  onloadstart 读取开始时触发
                  onprogress 读取中
                  注意:重点内容 
                  FileReader 读取后的文件不会返回给FileReader 本身, 而是存储在了 result 中
                   
                  HTML
                   
                  <input type="file" id="file"  multiple="multiple">
                  <div id="imgDiv"></div>       
                   
                  var result = document.getElementById("result");  
                  var file = document.getElementById("file");
                  file.change=function(){
                      var file = file.files[0]
                      var reader=new FileReader();  
                   
                      reader.readAsBinaryString(file);  
                      reader.οnlοad=function (e){  
                          imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'  
                          console.log(this) // 打印出转换后的 file 文件对象
                      }  
                  }
                   
                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/613.html
                3. <tfoot id='6grok1gb'></tfoot>
                4. <i id='bomyn4b2'><tr id='f1471i5l'><dt id='5bpqv2gy'><q id='mtqzmpd8'><span id='g2aq0anh'><b id='2doz0b36'><form id='39xve7te'><ins id='8zg118du'></ins><ul id='quxv9irx'></ul><sub id='onokl08f'></sub></form><legend id='ai7lbme9'></legend><bdo id='25hnagc1'><pre id='fc8nrore'><center id='mn1iceoo'></center></pre></bdo></b><th id='s3l54brf'></th></span></q></dt></tr></i><div id='mo3nkihb'><tfoot id='ldxp9pc0'></tfoot><dl id='b2i23vz7'><fieldset id='k9qqpqlh'></fieldset></dl></div>

                  <small id='oyg7zsop'></small><noframes id='gvbnjavz'>

                  • <bdo id='q24p6ek6'></bdo><ul id='0t8vnqto'></ul>

                      <legend id='p6n1lxgb'><style id='omoj5lpc'><dir id='pow3yoyz'><q id='63t1g78q'></q></dir></style></legend>
                    1. 多一份策划方案,总有益处。

                      请直接添加技术总监微信联系咨询

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

                      咨询相关问题或预约面谈,可以通过以下方式与我们联系

                      业务热线:18574395938 / 大客户专线:18574395938