javascript从image转换为base64位编码的String
更新时间：2014年07月29日 10:10:25 投稿：whsnow
选择webview把image以base64位编码的方式传给本地应用，就不需要再取一次图片文件了，从而提高了速度
最近需要把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>
PS：这里再为大家提供一款在线图片转base64编码的工具供大家参考使用：
图片转换为Base64编码在线工具：http://tools.jb51.net/transcoding/img2base64
相关文章
这篇文章主要为大家详细介绍了js轮盘抽奖实例，分析js轮盘抽奖实现原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
详解设置Webstorm 利用babel将ES6自动转码成ES5
这篇文章主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
这篇文章主要介绍了js实现类似iphone的网页滑屏解锁功能,结合完整实例形式分析了javascript动态操作页面元素实现解锁效果的相关实现技巧，并附带供读者源码下载参考,需要的朋友可以参考下2019-06-06
下面小编就为大家带来一篇Input文本框随着输入内容多少自动延伸的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了javascript适合移动端的日期时间拾取器，提供了友好的日期和时间选择操作界面，需要的朋友可以参考下2015-11-11
array.prototype.silce.call 理解分析
在很多框架中与遇到这个方法，但一时没去研究这个方法，只要前段时间被问到，尴尬无奈收场。所以学习就要追根究底的精神，废话少说，说正题。2010-04-04
最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了JavaScript前端开发时数值运算的小技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
项目需要做了如下的东西，希望能给其他需要的同学们一点参考。2010-08-08
最近公司项目用到了avtivex控件。以前从来没有用过。我把最近到处找到的使用方法整理一下。2011-01-01
最新评论