كيفية طباعة لوحة الرسم على عنوان URL للبيانات

عناوين URL للبياناتهي ميزة مفيدة توفرها المتصفحات.

يمكننا الحصول على صورة بدلاً من الرجوع إلى ملف نظام الملفات ، مثل

<img src="image.png" />

يقوم بتضمين الصورة في HTML نفسه ، شيء من هذا القبيل:

<img src="data:image/png;base64,iVBORw0KGgoAA…" />

أين القمامةالجزء الذي يتكون من أحرف وأرقام تبدو عشوائية طويل جدًا.

كنت ألعب معقماش APIلإنشاء صورة ديناميكيًا ، وقد عثرت على ملفtoDataURL()طريقة كائن قماش:

canvas.toDataURL()

أعتقد أن هذا مفيد بشكل خاص عند إنشاء صورة من جانب الخادم وتريد عرضها في صفحة ويب ، يتم إنشاؤها من جانب الخادم.

كل ذلك من عملية Node.js.

على وجه الخصوص ، باستخدامحزمة قماش npmيمكننا تهيئة لوحة قماشية:

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

ارسم فيه ، على سبيل المثالctx.fillText('Hello, World!', 50, 100)ثم اتصلcanvas.toDataURL()لإنشاء عنوان URL للبيانات لصورة يمكننا بعد ذلك إلحاقها بـ HTML في سلسلة ، مثل هذا:

const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

يمكنك فعل الشيء نفسه في الواجهة ، بالطبع ، باستثناء ملفcanvasالكائن هو إشارة إلى أ<canvas>عنصر HTML الذي ترسمه من أجل:

const canvas = document.getElementById('canvas')
//…
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

تحميل مجانيكتيب Node.js

كيفية طباعة لوحة الرسم على عنوان URL للبيانات

المزيد من دروس العقدة: