📘 ImgBB Uploader — Documentation

1️⃣ Cài đặt

Thêm file JavaScript vào cuối trang HTML:

app.js

<script src="app.js"></script>

Script sẽ tự phát hiện các nút có imgbb="upload".

Để tiện cho việc quản lý các ảnh, bạn nên thay api key của tôi thành của bạn. Việc lấy api key của imgbb cũng khá dễ đó ạ và ngoài ra key của mình cũng có thể bị mình xóa bất cứ lúc nào nên việc thay là điều hoàn toàn đúng đắn.

2️⃣ Cách sử dụng cơ bản

Dùng 1 nút bất kỳ để upload:

<button imgbb="upload" form="textbox" image="image">
    Upload ảnh full
</button>

Ý nghĩa các thuộc tính:

• imgbb="upload" → đánh dấu phần tử kích hoạt upload
• form="textbox" → ID hoặc name của textarea để chèn BBCode
• image="image|thumb|medium" → chọn loại URL để chèn
• name="abc" → đặt tên file trên ImgBB
• expiration="3600" → ảnh tự xoá sau X giây

3️⃣ Textarea để nhận BBCode

<textarea id="textbox"></textarea>

4️⃣ Hiển thị JSON trả về

Thêm thẻ có imgbb="info":

<div imgbb="info"></div>

JSON đầy đủ từ ImgBB sẽ được hiển thị sau khi upload.

5️⃣ Tiến trình upload (%)

Trong quá trình upload, nút đang được nhấn sẽ hiển thị:

• 12% / 100%
• 47% / 100%
• 100% / 100%

Sau khi hoàn tất → nút trở về text ban đầu.

6️⃣ Watermark (dấu bản quyền)

Uploader hỗ trợ 3 dạng watermark:

• Watermark chữ
• Watermark hình (logo)
• Cả chữ + hình cùng lúc

✔ Watermark chữ

Thêm một dải trắng mỏng phía dưới + chữ xám nhạt:

<button imgbb="upload"
        form="textbox"
        image="image"
        watemark-text="YourWebsite.com">
    Upload có watermark chữ
</button>

✔ Watermark logo (opacity 0.4)

Đặt logo ở góc dưới phải:

<button imgbb="upload"
        form="textbox"
        image="image"
        watemark-url="https://domain.com/logo.png">
    Upload có watermark logo
</button>

Khi trang tải → script tự preload logo để tránh lỗi CORS hoặc crash Canvas.

✔ Watermark kép (chữ + logo)

<button imgbb="upload"
        form="textbox"
        image="image"
        watemark-text="YourWeb"
        watemark-url="https://domain.com/logo.png">
    Upload FULL watermark
</button>

Nếu có cả 2 thuộc tính → ảnh sẽ được đóng cả chữ và logo khi được upload.

7️⃣ Các trường JSON trả về

data: {
    id,
    url,
    display_url,
    thumb,
    medium,
    delete_url,
    size,
    width,
    height,
    time,
    expiration
}