欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript從image轉換為base64位編碼的String

 更新時間:2014年07月29日 10:10:25   投稿:whsnow  
選擇webview把image以base64位編碼的方式傳給本地應用,就不需要再取一次圖片文件了,從而提高了速度

最近需要把app的微信分享方法開放給webview,涉及到分享的圖片,如果通過傳送圖片連接,那將要在后臺再取一次圖片文件,會影響速度,我選擇webview把image以base64位編碼的方式傳給本地應用。 下面是實現(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:這里再為大家提供一款在線圖片轉base64編碼的工具供大家參考使用:

圖片轉換為Base64編碼在線工具http://tools.jb51.net/transcoding/img2base64

相關文章

  • js輪盤抽獎實例分析

    js輪盤抽獎實例分析

    這篇文章主要為大家詳細介紹了js輪盤抽獎實例,分析js輪盤抽獎實現(xiàn)原理,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 詳解設置Webstorm 利用babel將ES6自動轉碼成ES5

    詳解設置Webstorm 利用babel將ES6自動轉碼成ES5

    這篇文章主要介紹了詳解設置Webstorm 利用babel將ES6自動轉碼成ES5,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】

    js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】

    這篇文章主要介紹了js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能,結合完整實例形式分析了javascript動態(tài)操作頁面元素實現(xiàn)解鎖效果的相關實現(xiàn)技巧,并附帶供讀者源碼下載參考,需要的朋友可以參考下
    2019-06-06
  • Input文本框隨著輸入內(nèi)容多少自動延伸的實現(xiàn)

    Input文本框隨著輸入內(nèi)容多少自動延伸的實現(xiàn)

    下面小編就為大家?guī)硪黄狪nput文本框隨著輸入內(nèi)容多少自動延伸的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • javascript適合移動端的日期時間拾取器

    javascript適合移動端的日期時間拾取器

    這篇文章主要介紹了javascript適合移動端的日期時間拾取器,提供了友好的日期和時間選擇操作界面,需要的朋友可以參考下
    2015-11-11
  • array.prototype.silce.call 理解分析

    array.prototype.silce.call 理解分析

    在很多框架中與遇到這個方法,但一時沒去研究這個方法,只要前段時間被問到,尷尬無奈收場。所以學習就要追根究底的精神,廢話少說,說正題。
    2010-04-04
  • Javascript中的getter和setter初識

    Javascript中的getter和setter初識

    最近在工作中遇到了getter和setter,getter 是一種獲得屬性值的方法,setter是一種設置屬性值的方法。下面這篇文章主要給大家介紹了關于Javascript中getter和setter的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • JavaScript前端開發(fā)時數(shù)值運算的小技巧

    JavaScript前端開發(fā)時數(shù)值運算的小技巧

    這篇文章主要介紹了JavaScript前端開發(fā)時數(shù)值運算的小技巧,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • JavaScript瀏覽器選項卡效果

    JavaScript瀏覽器選項卡效果

    項目需要做了如下的東西,希望能給其他需要的同學們一點參考。
    2010-08-08
  • javascript使用activex控件的代碼

    javascript使用activex控件的代碼

    最近公司項目用到了avtivex控件。以前從來沒有用過。我把最近到處找到的使用方法整理一下。
    2011-01-01

最新評論