图片转换为base64
2024-09-03 12:40:13
明天中秋了,先祝大家中秋快乐!哈哈,最近见有人在群里问怎么把图片转换成base64格式,之前刚好写过就把代码贴出来。
主要用到canvas中的toDataURL方法
<!DOCTYPE html>
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Image to Base64 - jsFiddle demo by handtrix</title> <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow"> <style type='text/css'>
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body {
padding: 20px;
}
</style> <script type='text/javascript'>
//<![CDATA[
$(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 = '*';
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);
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="http://upload.wikimedia.org/wikipedia/commons/4/4a/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>
可以直接复制到一个html中看下结果就是下边这样
最新文章
- 乱码引起的CSS失效原理,解决技巧。
- 【MySQL】分页优化
- vim插件神器spf13在Linux上的安装
- day11_API第一天
- 为 Macbook 增加锁屏热键技巧
- 深入理解JavaScript系列(转自汤姆大叔)
- [杂题]HDOJ5515 Game of Flying Circus
- web开发第一周
- Flink Program Guide (9) -- StateBackend : Fault Tolerance(Basic API Concepts -- For Java)
- ImageMagick wrapper for php
- Model Binding To A List
- 为UIView添加分类直接改或获取控件的frame值
- java验证控制的方法
- jsp基本语法及运行原理
- How to use VisualSVN Server and TortoiseSVN to host your codes and control your codes&#39; version
- 五十个小技巧提高PHP执行效率(一)
- 移动端 cursor:pointer问题
- MySQL集合操作类型
- 【新手向】自用的tooltip小插件,前端插件知识科普~
- Postgres中文分词
热门文章
- shell脚本之用户管理
- 解决springdatajpa插入大量数据速度慢的问题
- 在SpringCloud中MAVEN配置文件中的更改
- Nginx配置PHP环境支持
- 【Dart学习】-- Dart之异常处理
- Android中attrs.xml文件的使用详解
- HTML标签类总结
- 炼数成金数据分析课程---10、python中如何画图
- libcmt.lib(crt0dat.obj) : error LNK2005: _amsg_exit 已经在 MSVCRTD.lib(MSVCR110D.dll) 中定义
- (52) C# 串口通讯