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
相关文章
require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能2017-07-07
html+javascript+bootstrap实现层级多选框全层全选和多选功能
想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能，需要的朋友参考下2017-03-03
这篇文章主要为大家详细介绍了微信小程序实现带滑块的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JavaScript计划任务后台运行的方法,需要的朋友可以参考下2015-12-12
这篇文章详细介绍了GET、POST、PUT和DELETE四种HTTP请求方法的使用方式、优缺点及应用场景,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-01-01
在JavaScript开发中,数组操作是不可或缺的一部分,数组去重作为数据处理的一个常见需求,旨在从一个可能包含重复元素的数组中移除重复项,只保留唯一值,本文将详细介绍几种常见的数组去重方法,并结合实际应用场景进行探讨,需要的朋友可以参考下2024-12-12
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
将HTMLCollection/NodeList/伪数组转换成数组的实现方法，需要的朋友可以参考下。2011-06-06
详解JavaScript对数组操作（添加/删除/截取/排序/倒序）
这篇文章主要介绍了JavaScript对数组操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
下面小编就为大家带来一篇JS操作时间 - UNIX时间戳的简单介绍(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论