专栏首页LIN_ZONEjs 图片与base64互相转换

js 图片与base64互相转换

js将图片转化为base64

参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html

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转化为图片格式

参考地址:https://segmentfault.com/q/1010000010236626

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js将图片转换为base64

    lin_zone
  • macOS apache配置及开启虚拟服务器的开启,apache开启重写模式

    今天把自己的mac系统升到最新版,但是,apache却不能用了,因为mac上的apache是系统自带的,因为是mac目前的最新系统,所以出现了好多问题,整理了一...

    lin_zone
  • js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性

    lin_zone
  • js实现图片资源转化成base64的各种场景

    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如...

    yaphetsfang
  • js将图片转换为base64

    lin_zone
  • 利用Canvas写一个图片灰度处理的小工具,附源码

    前两天放假在家没事,写了一个把彩色图片变成灰度(黑白)图片的小工具,“选择图片”确定会自动输出处理后的黑白图片。

    德顺
  • img 转为base64(转)

    参考文献: https://www.cnblogs.com/tugenhua0707/p/4666076.html

    山河木马
  • JS实现一个v-if

    李文杨
  • DevOps之Gitlab-Runner

    背景 Gitlab-Runner是一款用于执行软件集成脚本的工具,它配合Gitlab-CI使用,是Gitlab代码管理工具的一部分。当软件工程师提交代码到Git...

    企鹅号小编
  • 2.3.3、Google Analytics高级应用——巧用对比

    对比就是将不同周期的数据指标做比较,从数量上确定其差异,并进行差异分析或趋势分析的分析方法,在GA里面非常常用的一种分析方法。

    GA小站

扫码关注云+社区

领取腾讯云代金券