zoukankan      html  css  js  c++  java
  • 前端JS base64与图片互转

    今天在用apicloud写APP时,遇到一个base64转图片并直接展示在当前页面的问题,因为之前使用过 “trans”模块,知道该模块可以将图片与base64格式之间来回转换

    所以想都没想就使用了trans模块,但是到后来我发现我拿不到转换的图片路径,trans模块保存是使用 fs:// ,或者可以选择将图片保存到系统相册,

    恕我才疏学浅不知道怎么去获取 fs:// 路径,而且再去让用户手动去相册选择图片未免太麻烦,

    然后我就反应过来了,img标签不是可以直接识别base64字符并转换为图片吗?......

     

     

     

    诶,我开发还是过于依赖框架、模块、插件等,很多原生的东西都要记不得了

    以后开发可一定得记住咯,顺便附上JS互转base64和图片

     

     

    js将图片转化为base64

    var img = "imgurl";//imgurl 就是你的图片路径  
    
    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.src = img;  
    image.onload = function(){  
      var base64 = getBase64Image(image);  
      console.log(base64);  
    }  
    

      

    js将base64转化为图片格式

    js直接设置img的src属性为 图片的base64数据即可

    document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );
    如下:
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

      

     

  • 相关阅读:
    IIS的各种身份验证详细测试
    HTTP Error 401.3 Unauthorized Error While creating IIS 7.0 web site on Windows 7
    C/S and B/S
    WCF ContractFilter mismatch at the EndpointDispatcher exception
    Configure WCF
    Inheritance VS Composition
    Unhandled Error in Silverlight Application, code 2103 when changing the namespace
    Java RMI VS TCP Socket
    Principles Of Object Oriented Design
    Socket处理发送和接收数据包,一个小实例:
  • 原文地址:https://www.cnblogs.com/mlw1814011067/p/13617411.html
Copyright © 2011-2022 走看看