根据图片的路径,得到图片的base64数据 (实用、赞)

205 篇文章 0 订阅
155 篇文章 0 订阅

原文出处:https://www.cnblogs.com/wind-dk/p/9056790.html

思路:使用html5的新特性:canvas, 该对象有一个toDataURL() 方法,可以将画布内容转换成一个指定编码的数据。我们可以先根据图片的路径将图片“画出来”,然后得到图片的数据。

具体的TypeScript 代码:
 

convertImgToBase64(url, callback) {  
      var canvas = document.createElement('canvas');
      canvas.width = 1024;
      canvas.height = 768;
      var ctx = canvas.getContext('2d');
      var img = new Image;
      img.crossOrigin = 'Anonymous';  
      img.onload = function() {  
         canvas.height = img.height;  
         canvas.width = img.width;  
         ctx.drawImage(img, 0, 0);  
         var dataURL = canvas.toDataURL('image/jpeg');  
         callback.call(this, dataURL);  
         canvas = null;  
      };  
      img.src = url;  
}

调用的时候:

this.convertImgToBase64(filePath, function(base64Image) {
  //filePath 即为图片的路径
  //base64 是转化后的图片数据
});


 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值