分享编程~
 
js根据图片绝对路径转base64和转blob数据

js将已知路径的图片转换成base64数据或者blob二进制数据流形式。

有些时候需要将已知路径的图片转换成base64数据或者blob二进制数据流形式。

思路:根据已知的路径获得图片,然后通过canvas画图的方式可以将图片转换成base64数据,通过获得的base64数据可以转换成blob二进制数据流。

js代码:

/**
 * 图片路径获得base64数据方法
 */
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;
}

/**
 * 根据base64数据转成blob数据方法
 */
function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**
 * 应用方法-获得图片base64数据和blob数据
 */
var fileUrl = 'd1.jpg'; // 图片路径
var image = new Image();
  image.crossOrigin = '';
  image.src = fileUrl;
  image.onload = function(){ // 图片载入后
    var base64 = getBase64Image(image);
    console.log('获得base64数据');console.log(base64);
    blob = dataURLtoBlob(base64);
    console.log('获得blob数据');console.log(blob);
  }


上一篇:PHP不可逆加密、对称加密、非对称加密讲解以及加密函数下一篇:js实现文件下载支持图片视频直接下载不会直接打开
赞(2) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/129.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!