javascript从image转换为base64位编码的String


Posted in Javascript onJuly 29, 2014

最近需要把app的微信分享方法开放给webview,涉及到分享的图片,如果通过传送图片连接,那将要在后台再取一次图片文件,会影响速度,我选择webview把image以base64位编码的方式传给本地应用。 下面是实现的参考代码:

<!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 = '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="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>
Javascript 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
再谈javascript原型继承
Nov 10 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
BootStrap前端框架使用方法详解
Feb 26 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 #Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 #Javascript
js键盘事件的keyCode
Jul 29 #Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 #Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 #Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 #Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python中异常报错处理方法汇总
2016/11/20 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
发布会邀请函
2015/01/31 职场文书
人事聘任通知
2015/04/21 职场文书
离婚起诉状范本
2015/05/19 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
办公用品管理制度
2015/08/04 职场文书
爱国教育主题班会
2015/08/14 职场文书