Nó liên quan nhiều hơn một chút so với việc chuyển đổi URL thành Hình ảnh. Bạn cần gửi cho Urlbox HTML và CSS của bạn
Trước tiên, bạn cần chuẩn bị HTML và CSS của mình. Chúng tôi đã thêm các tùy chọn chiều rộng, chiều cao và võng mạc ở đây để nó hiển thị đẹp mắt
Tên người dùng của bạn là ID người dùng của bạn và mật khẩu của bạn là Khóa API của bạn. Cả hai đều có sẵn từ bảng điều khiển. Mẫu mã JavaScript trình bày cách xác thực yêu cầu của bạn
Bạn có thể đăng ký khóa API miễn phí để bắt đầu
Khóa API miễn phí cho JavaScript
Mã ví dụ JavaScript
Ví dụ mã JavaScript này gửi HTTP POST tới API //hcti.io/v1/image. Chuyển đổi HTML/CSS của bạn thành hình ảnh bằng JavaScript
Ví dụ này sử dụng ứng dụng khách Yêu cầu. Cài đặt với npm install request
const request = require['request']
// Define your HTML/CSS
const data = {
html: "JavaScript ✅
",
css: ".box { border: 4px solid #03B875; padding: 20px; font-family: 'Roboto'; }",
google_fonts: "Roboto"
}
// Create an image by sending a POST to the API.
// Retrieve your api_id and api_key from the Dashboard. //htmlcsstoimage.com/dashboard
request.post[{ url: '//hcti.io/v1/image', form: data}]
.auth[API_ID, API_KEY]
.on['data', function[data] {
console.log[JSON.parse[data]]
}]
// {"url": "//hcti.io/v1/image/1113184e-419f-49f1-b231-2069942a186f"}
Để xem tất cả các tham số có sẵn, hãy xem.
Tôi có thể sử dụng cái này trong trình duyệt không?
Chúng tôi khuyên bạn chỉ nên sử dụng phía máy chủ API. Điều này rất quan trọng vì nó giữ bí mật khóa API của bạn. Nếu bạn hiển thị chúng trong trình duyệt, chúng có thể được sử dụng bởi bất kỳ ai
Ví dụ JavaScript - không đồng bộ/đang chờ
Nếu mã của bạn hỗ trợ async/await, chúng tôi khuyên bạn nên sử dụng cách sau
Ví dụ này sử dụng gói axios. Cài đặt với npm install axios
const axios = require['axios'];
async function createImage[] {
const payload = { html: "Test
",
css: "div { background-color: blue; }" };
let headers = { auth: {
username: 'user-id',
password: 'api-key'
},
headers: {
'Content-Type': 'application/json'
}
}
try {
const response = await axios.post['//hcti.io/v1/image', JSON.stringify[payload], headers];
console.log[response.data.url];
} catch [error] {
console.error[error];
}
}
createImage[];
JavaScript đơn giản [Nút. js] ví dụ
Nếu bạn không muốn cài đặt thư viện HTTP để thực hiện yêu cầu. Ví dụ này cho bạn thấy cách sử dụng API mà không có bất kỳ phụ thuộc nào
const https = require['https']
const data = JSON.stringify[{
html: "JavaScript ✅
",
css: ".box { border: 4px solid #03B875; padding: 20px; font-family: 'Roboto'; }",
google_fonts: "Roboto"
}]
// Retrieve your api_id and api_key from the Dashboard. //htmlcsstoimage.com/dashboard
const apiId = "your-api-id"
const apiKey = "your-api-key"
const options = {
hostname: 'hcti.io',
port: 443,
path: '/v1/image',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Basic ' + new Buffer[apiId + ':' + apiKey].toString['base64']
}
}
const req = https.request[options, [res] => {
console.log[`statusCode: ${res.statusCode}`]
res.on['data', [d] => {
const image = JSON.parse[d]
console.log[image["url"]]
}]
}]
req.on['error', [error] => {
console.error[error]
}]
req.write[data]
req.end[]
Ví dụ về JavaScript phía máy khách với Fetch API
- Sử dụng API tìm nạp để thực hiện yêu cầu HTTP POST tới API
- Được hỗ trợ bởi các trình duyệt hiện đại
- Chỉ được đề xuất cho các ứng dụng nội bộ để giữ an toàn cho khóa API của bạn
const json = {
html: "Hello, world!
",
css: ".test { background-color: green; }"
};
const username = "user-id";
const password = "api-key";
const options = {
method: 'POST',
body: JSON.stringify[json],
headers: {
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa[username + ":" + password]
}
}
fetch['//hcti.io/v1/image', options]
.then[res => {
if [res.ok] {
return res.json[];
} else {
return Promise.reject[res.status];
}
}]
.then[data => {
// Image URL is available here
console.log[data.url]
}]
.catch[err => console.error[err]];
Cần giúp đỡ?
Nói chuyện với một con người. Vui lòng gửi email cho chúng tôi support@htmlcsstoimage. com với bất kỳ câu hỏi nào và chúng tôi sẽ sẵn lòng giúp bạn bắt đầu
Bài viết này sẽ giới thiệu và hướng dẫn người dùng chuyển đổi phần tử div thành hình ảnh bằng AngularJS. Người dùng sẽ tạo một hình ảnh từ trang web và cũng có thể chuyển đổi một phần cụ thể của trang HTML thành hình ảnh. Ngoài ra, người dùng cần có thẻ HTML và thư viện JavaScript html2canvas. Bằng cách sử dụng điều này, chúng ta có thể tạo ra những hình ảnh tôi. e. chuyển đổi trang HTML thành hình ảnh ở định dạng PNG hoặc JPEG. Đồng thời xử lý ul, li và thẻ div được yêu cầu sang định dạng hình ảnh. Tóm lại, thư viện html2canvas sẽ hiển thị trang HTML sang định dạng hình ảnh ưa thích được người dùng đề cập. Điều đó có nghĩa là người dùng sẽ có thể tạo ảnh chụp màn hình của div hoặc bất kỳ thành phần nào của Trang web
Tiếp cận
- Có hai nút trong trang web, một nút được sử dụng để xem trước hình ảnh của trang web và nút còn lại được sử dụng để tải xuống hình ảnh của trang web
- Chuyển đổi trang html thành hình ảnh bằng thư viện JavaScript html2canvas
- Khi người dùng nhấp vào nút xem trước, hàm html2canvas[] được gọi và hàm này cũng gọi một hàm khác nối thêm bản xem trước của hình ảnh canvas
- Khi người dùng nhấp vào nút Tải xuống, trước tiên hãy thay đổi tài liệu thành định dạng hình ảnh rồi bắt đầu tải xuống thay vì hiển thị hình ảnh
Ví dụ