• 技术文章 >web前端 >js教程

    浅析JS中base64和图片互相转换(附代码)

    奋力向前奋力向前2021-09-01 17:14:31转载160

    之前的文章《解析mysql的安装与使用(收藏)》中,给大家了解了mysql的安装与使用。下面本篇文章给大家了解JS中base64和图片互相转换,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。

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

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

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

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

    微信截图_20210901170749.jpg

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

    以后开发可一定得记住咯,顺便附上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直接设置imgsrc属性为图片的base64数据即可

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

    推荐学习:js视频教程

    以上就是浅析JS中base64和图片互相转换(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    专题推荐:js 前端
    上一篇:javascript怎么串联字符形成字符串 下一篇:javascript中怎么求1到20的阶乘
    线上培训班

    相关文章推荐

    • javascript基本数据类型包括什么• javascript是什么意思啊• javascript超级是什么• javascript怎么串联字符形成字符串• javascript的变量是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网