将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位编码就介绍到这了。