快捷導(dǎo)航

js 將圖片連接轉(zhuǎn)換成base64格式的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月10日 09:44:33 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js 將圖片連接轉(zhuǎn)換成base64格式的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個(gè)HTTP 請(qǐng)求。壞處呢，就是瀏覽器不會(huì)緩存這種圖像?，F(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)文章

探索Javascript中this的奧秘
本文介紹了JavaScript中的this關(guān)鍵字在各種情況下的含義，實(shí)例都很簡(jiǎn)單，這樣更能有助于加深理解。雖然這只是js中一個(gè)很小的概念，但借此我們可以了解js中函數(shù)的執(zhí)行環(huán)境，充分掌握this的相關(guān)知識(shí)有助于我們?cè)诰帉懨嫦驅(qū)ο蟮腏avaScript程序時(shí)能夠游刃有余。
2016-12-12
JavaScript程序員應(yīng)該知道的45個(gè)實(shí)用技巧
在這篇文章中，我將分享一組JavaScript的技巧、竅門和最佳實(shí)踐，這些都是JavaScript程序員應(yīng)該知曉的，不管他們是使用在瀏覽器/引擎上，還是服務(wù)器端（SSJS——Service Side JavaScript）JavaScript解釋器上
2014-03-03
javascript代碼混淆與加解密方式
這篇文章主要介紹了javascript代碼混淆與加解密方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
FF下zoom的替代方案單位em
css 屬性zoom是ie私有屬性在FF中（或者說(shuō)僅實(shí)現(xiàn)CSS標(biāo)準(zhǔn)的其他瀏覽器中）無(wú)法使用，一直在網(wǎng)上搜索它的替代方案，但沒(méi)有收獲，后來(lái)聽(tīng)群里有朋友說(shuō)em或可解決此問(wèn)題，經(jīng)過(guò)研究和測(cè)試，發(fā)現(xiàn)果然可以解決。
2008-08-08
基于JavaScript實(shí)現(xiàn)文件秒傳功能
在互聯(lián)網(wǎng)高速發(fā)展的今天，文件上傳已經(jīng)成為網(wǎng)頁(yè)應(yīng)用中的一個(gè)基本功能，隨著用戶上傳文件尺寸的不斷增大、對(duì)質(zhì)量清晰度的要求也越來(lái)越高，所以本文給大家介紹了如何使用JavaScript實(shí)現(xiàn)文件秒傳功能,需要的朋友可以參考下
2024-01-01
js截取小數(shù)點(diǎn)后幾位的寫法
截取小數(shù)點(diǎn)后幾位的方法有很多，下面為大家介紹下使用js是如何實(shí)現(xiàn)的
2013-11-11
理解javascript定時(shí)器中的setTimeout與setInterval
這篇文章主要幫助大家學(xué)習(xí)理解javascript定時(shí)器中的setTimeout與setInterval，從實(shí)例出發(fā)進(jìn)行深入探討，感興趣的小伙伴們可以參考一下
2016-02-02
javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)的方法也有很多，這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼，純手寫的，感興趣的朋友不要錯(cuò)過(guò)。
2015-11-11
JavaScript數(shù)據(jù)類型和變量_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型和變量的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式實(shí)例分析【XHR工廠案例】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式,結(jié)合實(shí)例形式分析了JavaScript設(shè)計(jì)模式中簡(jiǎn)單工廠模式原理與XHR工廠應(yīng)用案例,需要的朋友可以參考下
2020-05-05