<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script> <style type="text/css">
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body {
padding: 20px;
}
</style> <title>网络图片输入网址到base64</title> </head> <body> <form class="form-horizontal" id="img2b64"> <h2>输入项</h2> <div class="form-group"> <label class="col-sm-2 control-label">转换方式:</label> <div class="col-sm-10"> <select class="form-control" name="convertType"> <option value="Canvas" selected>画布</option> <option value="FileReader">FileReader</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">URL:</label> <div class="col-sm-10"> <input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-default"> </div> </div> </form> <div class="output form-horizontal" style="display: none"> <hr> <h2>输出项</h2> <div> <strong class="col-sm-2 text-right">通过以下方式转换:</strong> <div class="col-sm-10"> <span class="convertType"></span> </div> </div> <div> <strong class="col-sm-2 text-right">尺寸:</strong> <div class="col-sm-10"> <span class="size"></span> </div> </div> <div> <strong class="col-sm-2 text-right">文本:</strong> <div class="col-sm-10"> <textarea class="form-control textbox"></textarea> </div> </div> <div> <strong class="col-sm-2 text-right">链接:</strong> <div class="col-sm-10"> <a href="#" class="link">打开图片</a> </div> </div> <div> <strong class="col-sm-2 text-right">图片:</strong> <div class="col-sm-10"> <img class="img"> </div> </div> </div> <script> $(function() {
function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
function convertFileToDataURLviaFileReader(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
$('#img2b64').submit(function(event) {
var imageUrl = $(this).find('[name=url]').val();
var convertType = $(this).find('[name=convertType]').val();
var convertFunction = convertType === 'FileReader' ?
convertFileToDataURLviaFileReader :
convertImgToDataURLviaCanvas;
convertFunction(imageUrl, function(base64Img) {
$('.output')
.find('.textbox')
.val(base64Img)
.end()
.find('.link')
.attr('href', base64Img)
.end()
.find('.img')
.attr('src', base64Img)
.end()
.find('.size')
.text(base64Img.length)
.end()
.find('.convertType')
.text(convertType)
.end()
.show()
});
event.preventDefault();
}); }); </script> </body> </html>
评论已关闭！
