快捷導(dǎo)航

javascript從image轉(zhuǎn)換為base64位編碼的String

更新時(shí)間：2014年07月29日 10:10:25 投稿：whsnow

選擇webview把image以base64位編碼的方式傳給本地應(yīng)用，就不需要再取一次圖片文件了，從而提高了速度

最近需要把a(bǔ)pp的微信分享方法開放給webview，涉及到分享的圖片，如果通過傳送圖片連接，那將要在后臺(tái)再取一次圖片文件，會(huì)影響速度，我選擇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的基本用法詳解
require.js是一個(gè)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)層級(jí)多選框全層全選和多選功能
想做一個(gè)先按層級(jí)排序并可以多選的功能，首先傾向于用多層標(biāo)簽式的，直接選定加在文本域里，接下來通過本文給大家介紹html+javascript+bootstrap實(shí)現(xiàn)層級(jí)多選框全層全選和多選功能，需要的朋友參考下
2017-03-03
微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript計(jì)劃任務(wù)后臺(tái)運(yùn)行的方法
這篇文章主要介紹了JavaScript計(jì)劃任務(wù)后臺(tái)運(yùn)行的方法,需要的朋友可以參考下
2015-12-12
前端常用的4種請(qǐng)求方式實(shí)例總結(jié)
這篇文章詳細(xì)介紹了GET、POST、PUT和DELETE四種HTTP請(qǐng)求方法的使用方式、優(yōu)缺點(diǎn)及應(yīng)用場(chǎng)景,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2025-01-01
JS實(shí)現(xiàn)數(shù)組去重的常用方法
在JavaScript開發(fā)中,數(shù)組操作是不可或缺的一部分,數(shù)組去重作為數(shù)據(jù)處理的一個(gè)常見需求,旨在從一個(gè)可能包含重復(fù)元素的數(shù)組中移除重復(fù)項(xiàng),只保留唯一值,本文將詳細(xì)介紹幾種常見的數(shù)組去重方法,并結(jié)合實(shí)際應(yīng)用場(chǎ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對(duì)數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對(duì)數(shù)組操作，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
JS操作時(shí)間 - UNIX時(shí)間戳的簡(jiǎn)單介紹(必看篇)
下面小編就為大家?guī)硪黄狫S操作時(shí)間 - UNIX時(shí)間戳的簡(jiǎn)單介紹(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08