javascript從image轉(zhuǎn)換為base64位編碼的String
最近需要把a(bǔ)pp的微信分享方法開(kāi)放給webview,涉及到分享的圖片,如果通過(guò)傳送圖片連接,那將要在后臺(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
- nodejs處理圖片的中間件node-images詳解
- js關(guān)于getImageData跨域問(wèn)題的解決方法
- jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(huà)(附源碼下載)
- javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法
- js的image onload事件使用遇到的問(wèn)題
- js中Image對(duì)象以及對(duì)其預(yù)加載處理示例
- 通過(guò)js獲取div的background-image屬性
- JavaScript Image對(duì)象實(shí)現(xiàn)原理實(shí)例解析
相關(guān)文章
詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5
這篇文章主要介紹了詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12js實(shí)現(xiàn)類(lèi)似iphone的網(wǎng)頁(yè)滑屏解鎖功能示例【附源碼下載】
這篇文章主要介紹了js實(shí)現(xiàn)類(lèi)似iphone的網(wǎng)頁(yè)滑屏解鎖功能,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)解鎖效果的相關(guān)實(shí)現(xiàn)技巧,并附帶供讀者源碼下載參考,需要的朋友可以參考下2019-06-06Input文本框隨著輸入內(nèi)容多少自動(dòng)延伸的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Input文本框隨著輸入內(nèi)容多少自動(dòng)延伸的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02javascript適合移動(dòng)端的日期時(shí)間拾取器
這篇文章主要介紹了javascript適合移動(dòng)端的日期時(shí)間拾取器,提供了友好的日期和時(shí)間選擇操作界面,需要的朋友可以參考下2015-11-11array.prototype.silce.call 理解分析
在很多框架中與遇到這個(gè)方法,但一時(shí)沒(méi)去研究這個(gè)方法,只要前段時(shí)間被問(wèn)到,尷尬無(wú)奈收?qǐng)觥K詫W(xué)習(xí)就要追根究底的精神,廢話少說(shuō),說(shuō)正題。2010-04-04Javascript中的getter和setter初識(shí)
最近在工作中遇到了getter和setter,getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。下面這篇文章主要給大家介紹了關(guān)于Javascript中g(shù)etter和setter的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08JavaScript前端開(kāi)發(fā)時(shí)數(shù)值運(yùn)算的小技巧
這篇文章主要介紹了JavaScript前端開(kāi)發(fā)時(shí)數(shù)值運(yùn)算的小技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07