将img图片转换为base64位编码

快乐打工仔 分类:实例代码

将img图片转换为base64位编码属于前端实例代码,有关更多实例代码大家可以查看

实际应用中,可能将图片转换为base64位编码的形式,下面就是一段能够实现此转换功能的代码实例。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type='text/javascript'>
$(window).load(function(){ 
  /** 
  * convertImgToBase64 
  * @param {String} url 
  * @param {Function} callback 
  * @param {String} [outputFormat='image/png'] 
  * @author HaNdTriX 
  * @example 
  convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){ 
    console.log('IMAGE:',base64Img); 
  }) 
  */ 
  function convertImgToBase64(url, callback, outputFormat){ 
    var canvas = document.createElement('CANVAS'); 
    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(outputFormat || 'image/png'); 
      callback.call(this, dataURL); 
      // Clean up 
      canvas = null; 
    }; 
    img.src = url; 
  } 
 
  $('#img2b64').submit(function(event){ 
    var imageUrl = $(this).find('input[name=url]').val(); 
    console.log('imageUrl', imageUrl); 
    convertImgToBase64(imageUrl, function(base64Img){ 
      $('.output') 
      .find('textarea') 
      .val(base64Img) 
      .end() 
      .find('a') 
      .attr('href', base64Img) 
      .text(base64Img) 
      .end() 
      .find('img') 
      .attr('src', base64Img); 
    }); 
    event.preventDefault(); 
  }); 
});
</script>
</head>
<body>
<h2>Input</h2>
<form class="input-group" id="img2b64">
  <input type="url" name="url"  value="/wp-content/uploads/front-end-tutorial/Logo_2013_Google.png">
  <span class="input-group-btn"><input type="submit"></span>
</form>
<hr>
<div class="output">
  <textarea class="form-control"></textarea>
</div>
</body>
</html>

将img图片转换为base64位编码,这样的场景在实际项目中还是用的比较多的,关于将img图片转换为base64位编码就介绍到这了。

回复

我来回复
  • 暂无回复内容