javascript從image轉(zhuǎn)換為base64位編碼的String
更新時間：2014年07月29日 10:10:25 投稿：whsnow
選擇webview把image以base64位編碼的方式傳給本地應(yīng)用，就不需要再取一次圖片文件了，從而提高了速度
最近需要把a(bǔ)pp的微信分享方法開放給webview，涉及到分享的圖片，如果通過傳送圖片連接，那將要在后臺再取一次圖片文件，會影響速度，我選擇webview把image以base64位編碼的方式傳給本地應(yīng)用。 下面是實(shí)現(xiàn)的參考代碼：
<!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：這里再為大家提供一款在線圖片轉(zhuǎn)base64編碼的工具供大家參考使用：
圖片轉(zhuǎn)換為Base64編碼在線工具：http://tools.jb51.net/transcoding/img2base64
相關(guān)文章
require.js是一個js腳本加載器，它遵循AMD(Asynchronous Module Definition)規(guī)范，實(shí)現(xiàn)js腳本的異步加載，不阻塞頁面的渲染和其后的腳本的執(zhí)行，并提供了在加載完成之后的執(zhí)行相應(yīng)回調(diào)函數(shù)的功能2017-07-07
html+javascript+bootstrap實(shí)現(xiàn)層級多選框全層全選和多選功能
想做一個先按層級排序并可以多選的功能，首先傾向于用多層標(biāo)簽式的，直接選定加在文本域里，接下來通過本文給大家介紹html+javascript+bootstrap實(shí)現(xiàn)層級多選框全層全選和多選功能，需要的朋友參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法
這篇文章主要介紹了JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法,需要的朋友可以參考下2015-12-12
這篇文章詳細(xì)介紹了GET、POST、PUT和DELETE四種HTTP請求方法的使用方式、優(yōu)缺點(diǎn)及應(yīng)用場景,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-01-01
在JavaScript開發(fā)中,數(shù)組操作是不可或缺的一部分,數(shù)組去重作為數(shù)據(jù)處理的一個常見需求,旨在從一個可能包含重復(fù)元素的數(shù)組中移除重復(fù)項(xiàng),只保留唯一值,本文將詳細(xì)介紹幾種常見的數(shù)組去重方法,并結(jié)合實(shí)際應(yīng)用場景進(jìn)行探討,需要的朋友可以參考下2024-12-12
將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法
將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法，需要的朋友可以參考下。2011-06-06
詳解JavaScript對數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對數(shù)組操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
下面小編就為大家?guī)硪黄狫S操作時間 - UNIX時間戳的簡單介紹(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08