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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
react路由配置方式详解
Aug 07 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 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
PHP 创建标签云函数代码
2010/05/26 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python生成器(Generator)详解
2015/04/13 Python
详细探究Python中的字典容器
2015/04/14 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
python中实现词云图的示例
2020/12/19 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
个人思想理论学习的自我鉴定
2013/11/30 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
店面销售职位的职责
2014/03/09 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python