36
4
CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.
Bài viết blog CFSDN này sử dụng js để tạo hình thu nhỏ hình ảnh thông qua canvas, được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.
Hầu hết các ứng dụng mạng ngày nay sẽ lưu hình ảnh có nhiều kích cỡ cùng lúc khi tải hình ảnh lên. Thuật ngữ chuyên môn là tạo hình thu nhỏ. Phương pháp chung để tạo hình thu nhỏ là tạo hình thu nhỏ thông qua các ngôn ngữ phụ trợ như php. Tuy nhiên, để giảm thời gian cần thiết cho máy chủ, chúng ta có thể bắt đầu từ giao diện người dùng, trước tiên tạo các hình thu nhỏ có kích thước khác nhau và chuyển chúng đến phần phụ trợ, còn phần phụ trợ chỉ cần lưu trữ hình ảnh được truyền từ giao diện người dùng.
Sử dụng Canvas chúng ta có thể dễ dàng tạo ra các hình ảnh có kích thước khác nhau. Cách thực hiện cụ thể như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
chức năng
thay đổi kích thước hình ảnh(src,gọi lại,w,h){
của chúng tôi
canvas = document.createElement(
"vải bạt"
),
ctx = canvas.getContext(
"2ngày"
),
trong =
mới
Hình ảnh();
w = w || 0,
h = h || 0;
im.onload =
chức năng
(){
//Sử dụng kích thước ban đầu cho kích thước thu phóng đến
!w && (w =
cái này
.chiều rộng);
!h && (h =
cái này
.chiều cao);
// Sử dụng chiều dài và chiều rộng tối đa làm cơ sở cho việc tạo hình ảnh cuối cùng
nếu như
(trong !==
cái này
.chiều rộng || h !==
cái này
.chiều cao){
của chúng tôi
tỉ lệ;
nếu như
(w>h){
tỉ lệ =
cái này
.chiều rộng / w;
h =
cái này
.chiều cao / tỷ lệ;
}
khác
nếu như
(w===h){
nếu như
(
cái này
.chiều rộng>
cái này
.chiều cao){
tỉ lệ =
cái này
.chiều rộng / w;
h =
cái này
.chiều cao / tỷ lệ;
}
khác
{
tỉ lệ =
cái này
.chiều cao / h;
w =
cái này
.chiều rộng / tỷ lệ;
}
}
khác
{
tỉ lệ =
cái này
.chiều cao / h;
w =
cái này
.chiều rộng / tỷ lệ;
}
}
//Sử dụng chiều dài và chiều rộng làm kích thước của hình ảnh được tạo cuối cùng
nếu như
(w>h){
của chúng tôi
bù trừ = (w - h) / 2;
canvas. width = canvas. height = w;
ctx. drawImage(im,0,offset,w,h);
}
khác
nếu như
(w<>
của chúng tôi
bù trừ = (h - w) / 2;
canvas. width = canvas. height = h;
ctx. drawImage(im, offset,0,w,h);
}
khác
{
canvas. width = canvas. height = h;
ctx. drawImage(im,0,0,w,h);
}
gọi lại(canvas.toDataURL(
"hình ảnh/png"
));
}
im.src = src;
}
|
Chất liệu hình ảnh là ảnh chụp màn hình ứng dụng làm khung ảnh do chúng tôi thực hiện. Các bạn quan tâm có thể liên hệ với mình, cùng thảo luận và cùng chơi nhé.
Link gốc: https://www.deanhan.cn/sh-html.html.
Cuối cùng, bài viết này về cách js tạo hình thu nhỏ hình ảnh thông qua canvas kết thúc tại đây. Nếu bạn muốn biết thêm về cách js tạo hình thu nhỏ hình ảnh thông qua canvas, vui lòng tìm kiếm các bài viết về CFSDN hoặc tiếp tục duyệt qua các bài viết liên quan. blog của tôi! .
36
4
0
Tôi có một div có kích thước cố định với số lượng phần tử con thay đổi. Tôi không biết kích thước của trẻ em. Mục đích là thu nhỏ chúng để phù hợp với cha mẹ. Ví dụ: .parent { chiều rộng: 100px chiều cao: 100p;
Trung tâm cá nhân
Điều phát hành
từ bỏ
Tôi là một lập trình viên xuất sắc, rất giỏi!