كيفية تحميل صورة في لوحة HTML

كنت أستخدم ملفcanvasحزمة npm لرسم جانب خادم صورة باستخدام Canvas API.

ملاحظة: هذه هي طريقة العمل مع الصور في لوحة الرسم في Node.js ، وليس في المتصفح. في المتصفح الأمر مختلف.

حمل الloadImage()وظيفة

const { createCanvas, loadImage } = require('canvas')

قم بإنشاء اللوحة القماشية:

const width = 1200
const height = 630

const canvas = createCanvas(width, height) const context = canvas.getContext(‘2d’)

ثم اتصلloadImage()، والتي ترجع وعدًا عند تحميل الصورة:

loadImage('./logo.png').then(image => {

})

يمكنك أيضًا استخدام ، داخل دالة غير متزامنة:

const image = await loadImage('./logo.png')

بمجرد الحصول على الصورة ، اتصلdrawImageوتمريرها باستخدام معلمات x و y و width و height:

context.drawImage(image, 340, 515, 70, 70)

المزيد من دروس js: