Тёмный

How to Convert Images Into Base 64 Data URLs with JavaScript 

dcode
Подписаться 132 тыс.
Просмотров 44 тыс.
50% 1

In today's tutorial I'll show you how to convert an image to data URL in JavaScript. This is very easy to do by using the FileReader object.
For your reference, check this out:
developer.mozilla.org/en-US/d...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdevelopment

Опубликовано:

 

15 авг 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 30   
@dcode-software
@dcode-software Год назад
🔽 CONVERT CANVAS INTO BASE64 URL 🔽 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YoVJWZrS2WU.html 🎓 COMPLETE JAVASCRIPT CRASH COURSE FOR BEGINNERS 👇: www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
@WiLDeveD
@WiLDeveD Год назад
Well done Dom !!! cool video. thanks
@aaomms7986
@aaomms7986 10 месяцев назад
Thank man!!
@RandomMusicD
@RandomMusicD 11 месяцев назад
Thanks bro
@faaizalam235
@faaizalam235 Год назад
Bro I am. Working on a project, and that where I had to use your this method for image to be stored in local storage but now I want to send it to the server so it want this base 64 url image to be as it was in file object, so how can I basically make the back after making a image into string base 64 to its original face
@earlchesterantonio1581
@earlchesterantonio1581 Год назад
Can i achieve this results with js only? Without using the file input?
@whatthefunction9140
@whatthefunction9140 Год назад
Do a video on the limits of data urls
@pouriyanourouznejad7090
@pouriyanourouznejad7090 Год назад
1) Can we convert that very long url to a very short url and get the same image as result? 2) this data url will only works for images? Or we can use it for any files? 3) I tried to create a download link for an image with data-url in the anchor tag. but when I click on the anchor tag, it doesn't show me the image as a result! Just shows a blank screen! And I have to reload that blank screen to see the image! Y is this happening? What should I do? (my native language isn't English, so... Sorry if I did something wrong in my words 😁)
@hikari1690
@hikari1690 Год назад
Haha, a few weeks after doing this myself. I wish I could tell past me to procrastinate a little and just watch this
@yassineabdelouafi
@yassineabdelouafi Год назад
Thank You ,i need a help please how to upload image as base64 in dexie.js database ?
@erturkyorulmaz7376
@erturkyorulmaz7376 6 месяцев назад
Can we get this data type just giving local url? (exmp : img.src = "images/sample.jpg")
@abdullahalrezarohan6232
@abdullahalrezarohan6232 Год назад
can we save that url in database and use it as an image url to show on the website?
@dcode-software
@dcode-software Год назад
Yes you can but I'd keep it to small images only. You're better off hosting images on something like S3
@prakashchaure6307
@prakashchaure6307 Год назад
@mahmoudmashoun5002
@mahmoudmashoun5002 Год назад
I really need to know how to get the file as blob without using the form parent tag . Thanks
@aminabudahab
@aminabudahab Год назад
URL.createObjectURL
@jefferyaaron3462
@jefferyaaron3462 Год назад
I got errors on jpg so this is the code i use u can wrap a function around it return new Promise((res, rej) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { res(console.log(reader.result)); }; reader.onerror = (err) => { rej(err); }; });
@getsetalk
@getsetalk Год назад
How to convert any image address which is uploaded at any website , that's how to convert In Blob
@Funny-collector
@Funny-collector 5 месяцев назад
I need the rest of the video. or any other video to watch
@naiandersonbruno1841
@naiandersonbruno1841 Год назад
Theme vs code, please 😁, and thanks for helpe
@dcode-software
@dcode-software Год назад
No problem. The theme is called "dcode" - you can find it on the VS Code Marketplace
@naiandersonbruno1841
@naiandersonbruno1841 Год назад
@@dcode-software thanks😁
@Muhammad-bp7dq
@Muhammad-bp7dq Год назад
off topic...... what should i do after i learn vanila js ?
@dcode-software
@dcode-software Год назад
Learn a framework - React, Vue, Svelte etc.
@__ritesh
@__ritesh Год назад
If you are interested in moving forward with front-end then learn React and if backend then Node js
@YasinNabi
@YasinNabi Год назад
If you want to beat the market or become a millionaire, the first thing you need to do is , to get financial education. a fellow creator][[]][
@dchubad
@dchubad Год назад
darta lol
@dcode-software
@dcode-software Год назад
🦘
@nanonorthlabs3375
@nanonorthlabs3375 Год назад
Ive said this before on your videos I’ll say this again, these videos have very little to do with software engineering or improving your skills as a software developer and more to do with being good at following step by step instructions, aka tutorials. Channels like these are detrimental for beginners, this is not how problem solving skills are developed. Now I understand if you are showing how to solve problems or atleast make something challenging, but who the needs videos that are 4-10 mins long where you can literally google it in 30 seconds. This is contenting whoring and fishing for subscribers. It’s like language learning channels that never go past the first level
@dcode-software
@dcode-software Год назад
This intends to be a tutorial-style video. If someone needs to know how to convert an image into a data URL they can search RU-vid and find this video. It's 4 minutes long so the viewer can get their answer quick and move on
Далее
Common JavaScript Mistakes and How to Avoid Them
18:48
DO NOT Dunk Here ❌🏀
00:20
Просмотров 7 млн
Create File URLs in JavaScript: Data URLs v Blob URLs
11:12
5 POWERFUL JavaScript Events You Didn't Know
10:43
Просмотров 15 тыс.
How I'd Learn Web Development (If I Could Start Over)
6:55
How To Load Images Like A Pro
15:48
Просмотров 360 тыс.