javascript将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"
class="form-control"
placeholder="Insert an IMAGE-URL"
value="/wp-content/uploads/front-end-tutorial/Logo_2013_Google.png"
required>
<span class="input-group-btn">
<input type="submit" class="btn btn-default">
</span>
</form>
<hr>
<h2>Output</h2>
<div class="output">
<textarea class="form-control"></textarea><br>
<a></a>
<br><br>
<img>
<br>
</div>
</body>
</html>