js 將圖片連接轉(zhuǎn)換成base64格式的簡(jiǎn)單實(shí)例
我們把圖像文件的內(nèi)容直接寫在了HTML 文件中,這樣做的好處是,節(jié)省了一個(gè)HTTP 請(qǐng)求。壞處呢,就是瀏覽器不會(huì)緩存這種圖像。現(xiàn)在我們提供一個(gè)js:
function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), 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); canvas = null; }; img.src = url; } convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){ // Base64DataURL });
以上這篇js 將圖片連接轉(zhuǎn)換成base64格式的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入,那么tofixed與round有什么區(qū)別呢?下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別,需要的朋友參考下吧2017-10-10一個(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄粋€(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法
下面就為大家?guī)硪黄狫avaScript基礎(chǔ)之流程控制語(yǔ)句的用法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08實(shí)例詳解JavaScript獲取鏈接參數(shù)的方法
這篇文章主要介紹了實(shí)例詳解JavaScript獲取鏈接參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-01-01js字符串截取函數(shù)slice、substring和substr的比較
這篇文章主要震碎js字符串截取函數(shù)slice、substring和substr進(jìn)行比較,感興趣的小伙伴們可以參考一下2016-05-05淺談javascript對(duì)象模型和function對(duì)象
這篇文章主要簡(jiǎn)單介紹了javascript對(duì)象模型和function對(duì)象,以及相關(guān)的示例代碼,非常實(shí)用,需要的小伙伴參考下2014-12-12用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1...2007-02-02微信小程序?qū)崿F(xiàn)的一鍵連接wifi功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵連接wifi功能,結(jié)合實(shí)例形式分析了微信小程序操作WiFi連接的模塊初始化、配置、連接等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04