本地与在线图片转Base64及图片预览

function localImgLoad() {
var src = this.files[0];
var self = $(this);
var read = new FileReader();
read.onload = function(e) {
var html = "<img src=" + e.target.result + " alt='' />";
self.parent().append(html);
document.getElementById('localBase64StrContainer').value = e.target.result;
}
read.readAsDataURL(src)
};

<div>
本地图片预览(本地图片转Base64)：
<input type="file" onchange="localImgLoad.call(this)"/>
<br/>
<textarea id="localBase64StrContainer" cols=50 rows=6>
</textarea>
<br/>
</div>
<br/>

function convertImgToBase64(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
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/jpg');
callback.call(this, dataURL);
//alert(this);
canvas = null;
};
img.src = url;
}

function onlineButtonGetImg(imgUrl) {
convertImgToBase64(imgUrl,
function(base64Img) {
document.getElementById('onlineBase64StrContainer').value = base64Img;
$('#onlineBase64StrContainer').parent().append("<img src=" + base64Img + " />");
},'image/png')
}

<div>
在线图片转base64：
<br/>
<br/>
<input type="text" id="onlineUrl" size=30 value="http://sandbox.runjs.cn/uploads/rs/61/0dvnfbe3/081408127534068.png"/>
<button onclick="onlineButtonGetImg(document.getElementById('onlineUrl').value)">
转换
</button>
<br/>
<br/>
<textarea id="onlineBase64StrContainer"  cols=50 rows=6>
</textarea>
<br/>
</div>