快捷導(dǎo)航

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

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

下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個HTTP 請求。壞處呢，就是瀏覽器不會緩存這種圖像?，F(xiàn)在我們提供一個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格式的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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