Cách tải hình ảnh trong canvas HTML

Tôi đã sử dụngcanvasgói npm để vẽ phía máy chủ hình ảnh bằng API Canvas.

Lưu ý: đây là cách làm việc với hình ảnh trong canvas trong Node.js, không phải trong trình duyệt. Trong trình duyệt thì khác.

TảiloadImage()chức năng

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

Tạo canvas:

const width = 1200
const height = 630

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

Sau đó gọiloadImage(), trả về một lời hứa khi hình ảnh được tải:

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

})

Bạn cũng có thể sử dụng bên trong một hàm không đồng bộ:

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

Sau khi bạn có hình ảnh, hãy gọidrawImagevà chuyển nó với các tham số x, y, width và height:

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

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: