از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
رمزگذاری Base64 به داده های باینری اجازه می دهد تا در قالبی نمایش داده شوند که به نظر می رسد و مانند متن ساده عمل می کند. یکی از موارد استفاده رایج از رمزگذاری Base64 تبدیل تصاویر به فرمت Base64 است که می تواند مستقیماً در فایل های HTML یا CSS جاسازی شود. این کار برای انتقال یا ذخیره آسان‌تر داده‌های تصویر بدون نیاز به داده‌های باینری انجام می‌شود، که بسیاری از پروتکل‌ها و فرمت‌های فایل نمی‌توانند به درستی از آن استفاده کنند.
در این بایت، روش تبدیل تصاویر و URL تصاویر را به Base64 در Node.js خواهیم دید.
تبدیل تصویر به Base64 در Node.js
برای تبدیل یک تصویر به Base64 در Node.js، به آن نیاز داریم fs ماژول که یک ماژول داخلی برای عملیات ورودی/خروجی فایل است. به عنوان مثال:
const fs = require('fs');
fs.readFile('image.png', (err, data) => {
if (err) throw err;
let base64Image = Buffer.from(data, 'binary').toString('base64');
console.log(base64Image);
});
در کد بالا، ما در حال خواندن فایل تصویری با استفاده از آن هستیم fs.readFile() و سپس با استفاده از داده های باینری را به Base64 تبدیل کنید Buffer.from().toString('base64').
توجه داشته باشید: مثال ما فرض می کند که تصویر در همان دایرکتوری اسکریپت شما قرار دارد، بنابراین مطمئن شوید که مسیر را مطابق با آن تنظیم کنید.
تبدیل تصویر ناهمزمان به Base64
کد بالا به خوبی کار می کند، اما همزمان است، به این معنی که حلقه رویداد Node.js را مسدود می کند. برای اینکه آن را ناهمزمان کنیم، می توانیم از آن استفاده کنیم readFile روش به روشی متفاوت:
const fs = require('fs').promises;
async function convertImageToBase64() {
const data = await fs.readFile('image.png');
let base64Image = Buffer.from(data, 'binary').toString('base64');
console.log(base64Image);
}
convertImageToBase64();
در این کد، ما از fs.promises.readFile() متد، که وعده ای را برمی گرداند که با محتوای فایل حل می شود.
تبدیل ناهمزمان با Callbacks
اگر ترجیح می‌دهید از تماس‌های برگشتی به جای وعده‌ها استفاده کنید، می‌توانید از آن استفاده کنید fs.readFile() روشی مانند این:
const fs = require('fs');
fs.readFile('image.png', (err, data) => {
if (err) throw err;
let base64Image = Buffer.from(data, 'binary').toString('base64');
console.log(base64Image);
});
این نسخه از fs.readFile() یک تابع فراخوانی می گیرد که پس از خواندن فایل فراخوانی می شود. پاسخ تماس دو آرگومان دریافت می کند: یک شی خطا (در صورت وجود) و داده های فایل.
تبدیل URL تصویر به Base64 در Node.js
قبل از اینکه وارد کد شویم، چرا در وهله اول می خواهیم این کار را انجام دهیم؟
کدگذاری تصاویر به صورت Base64 و جاسازی مستقیم آنها در یک HTML <img> برچسب می تواند مزایای زیادی داشته باشد، به ویژه موارد زیر:
- کاهش درخواست های HTTP و در نتیجه بهبود زمان بارگذاری.
- قابلیت حمل و پشتیبانی بهتر HTML با تصاویر جاسازی شده مانند این در زمینه های بیشتری مانند ایمیل ها کار می کند.
- با اجتناب از درخواست‌های متقابل یا ارائه محتوا از طریق اتصالات امن، امنیت محتوا را بهتر می‌کند.
اگرچه شایان ذکر است که برخی از اشکالات مانند افزایش اندازه سند HTML وجود دارد که ممکن است برخی از دستاوردهای عملکرد را جبران کند.
در Node.js، تبدیل URL تصویر به Base64 را می توان با استفاده از request ماژول به همراه داخلی Buffer کلاس سپس این داده Base64 را می توان مستقیماً در یک تگ تصویر HTML جاسازی کرد و به تصویر اجازه می دهد در وب نمایش داده شود. page بدون پیوند به فایل خارجی
ابتدا باید آن را نصب کنید request ماژول با استفاده از npm:
$ npm install request
در اینجا مثالی از روش تبدیل URL تصویر به Base64 و جاسازی آن در یک HTML آورده شده است <img> برچسب:
const request = require('request');
request.get('http://example.com/image.jpg', { encoding: null }, (error, response, body) => {
if (!error && response.statusCode == 200) {
let base64Image = `data:${response.headers('content-type')};base64,` + Buffer.from(body).toString('base64');
console.log('<img src="' + base64Image + '"/>');
}
});
این encoding: null گزینه تضمین می کند که بدنه پاسخ به عنوان بافر بازگردانده می شود. سپس داده‌های Base64 را با نوع MIME مناسب پیشوند می‌دهیم تا یک URL داده ایجاد کنیم، که می‌تواند مستقیماً در یک <img> برچسب زدن
استفاده از Axios برای تبدیل URL تصویر به Base64
یکی دیگر از کتابخانه های محبوب برای ایجاد درخواست های HTTP در Node.js است Axios. می توانید از Axios برای تبدیل URL تصویر به Base64 و سپس جاسازی آن در یک HTML استفاده کنید <img> برچسب زدن
برای استفاده از Axios، ابتدا باید آن را از طریق npm نصب کنید:
$ npm install axios
در اینجا روش استفاده از Axios برای تبدیل URL تصویر به Base64 و جاسازی آن در یک HTML آمده است. <img> برچسب:
const axios = require('axios');
axios
.get('http://example.com/image.jpg', { responseType: 'arraybuffer' })
.then(response => {
let base64Image = `data:${response.headers('content-type')};base64,` + Buffer.from(response.data).toString('base64');
console.log('<img src="' + base64Image + '"/>');
})
.catch(error => console.log(error));
دوباره، ما در حال تنظیم responseType گزینه ای به 'arraybuffer' و پیشوند داده های Base64 با نوع MIME مناسب، در نتیجه URL داده ای ایجاد می شود که می تواند مستقیماً در یک صفحه جاسازی شود. <img> برچسب زدن
توجه داشته باشید: فراموش نکنید که اشتباهات را در وعده های خود مدیریت کنید! می توانید از a استفاده کنید .catch() مسدود کردن برای گرفتن و رسیدگی به هر گونه خطایی که ممکن است در طول درخواست HTTP یا تبدیل رخ دهد process.
نتیجه
تبدیل تصاویر و URL های تصویر به Base64 در Node.js کار نسبتاً ساده ای است process به لطف داخلی Buffer کلاس و کتابخانه ها مانند request و axios.
بسته به اینکه می‌توانید از تماس‌های برگشتی یا وعده‌ها استفاده کنید روی مورد استفاده خاص و ترجیح شخصی شما. صرف نظر از روشی که انتخاب می‌کنید، این تکنیک‌ها راه ساده‌ای برای کار با داده‌های تصویر در برنامه‌های Node.js شما ارائه می‌کنند.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-01 07:25:03
