Blog iTeam OS
Trang chủ
Blogspot Tips

Hướng dẫn resizeImage cắt hình trong blogspot

Hướng dẫn resizeImage cắt hình trong blogspot. Trong blogspot có chức năng resizeImage giúp chúng ta có thể cắt hình theo tùy chình cho phù hợp với từ

Trong blogspot có chức năng resizeImage giúp chúng ta có thể cắt hình theo tùy chình cho phù hợp với từng blog, rất đơn giản và nhanh gọn.

Hướng dẫn resizeImage cắt hình trong blogspot
Hướng dẫn resizeImage cắt hình trong blogspot

Hướng dẫn resizeImage cắt hình trong blogspot :-

Tỉ lệ cắt hình:
- Cắt hình vuông: "1:1", "2:2", "25:25", "50:50", "100:100", ...
- Cắt hình cảnh quan: "4:3", "16:9", "800:600", ...

1. Load hình từ bài viết. Cấu trúc để lấy hình ảnh như sau:

<img expr:src='data:view.featuredImage resizeImage 600 resizeImage "4:3"'/>

Hoặc chúng ta có thể viết gọn lại như sau

<img expr:src='resizeImage(data:view.featuredImage, 600, "4:3")'/>

Trong đó kích thước 600px cắt theo tỉ lệ 4:3

<img expr:src='resizeImage(data:view.featuredImage, 600, "1:1")'/>

Trong đó kích thước 600px cắt theo tỉ lệ 1:1 (Xuất ra hình vuông rộng 600px - cao 600px)

2. Hình trực tiếp: Ví dụ mình có 1 hình ảnh như sau, kích thước vuông 968 x 968pixels

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/s1600/d.jpg

Cắt tỉ lệ 500 x 200pixels

<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/s1600/d.jpg", 500, "500:200")' />

Khi đó hình sẽ được cắt như này 500 x 200 pixels:

Cái link ảnh ban đầu nó đổi thành:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/w500-h200-p-k-no-nu/d.jpg

Từ link gốc ban đầu là s1600 -> w500-h200-p-k-no-nu 

Trong đó 
w500 : Rộng 500px
h200 : Cao 200px

Như vậy bạn muốn hình kích thước bao nhiêu thì chỉ cần nhập tỉ lệ Rộng - Cao w500-h200-p-k-no-nu vô link là được.

Hình vuông kích thước 500 x 500pixels : w500-h500-p-k-no-nu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/w500-h500-p-k-no-nu/d.jpg

Hình chữ nhật kích thước 600 x 300pixels : w600-h300-p-k-no-nu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/w600-h300-p-k-no-nu/d.jpg

Các bạn muốn kích thước bao nhiêu thì chỉ cần nhập kích thước vô đó là được, hình tự động cắt cho bạn.
Thu nhỏ hình mà không cắt:
Vẫn link đó là

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/s1600/d.jpg

Nếu bạn muốn thù nhỏ hình lại thì đổ số 1600 xuống ví dụ

s1400 s1200 s1000 s800 s600 s200

3. Cắt và xuất ra nhiều hình có kích thước khác nhau

Một hình ban đầu cắt thành 3 kích thước 100 200 300 như sau theo tỉ lệ 16:9

<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/s1600/d.jpg", [100,200,300], "16:9")' var='image'>
  <img expr:src='data:image.url'/>
</b:loop>

Kết quả là

Hướng dẫn resizeImage cắt hình trong blogspot

Một hình ban đầu cắt thành 3 kích thước 100 200 300 như sau theo tỉ lệ 1:1

<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1hM1zusmRrAJRM-asrQa1ijI7iISnEYhlphEBbyR2MFwI1l28RAgesE63P1XdXuvMqvaQeio3Zvwe3r02N0v7ELPzfKWVSrdXklMjWt1urPlUinRxBi-uok8fp4LZU0pCqj2-X1pN3mT/s1600/d.jpg",
[100,200,300], "1:1")' var='image'>
  <img expr:src='data:image.url'/>
</b:loop>

Kết quả là

Hướng dẫn resizeImage cắt hình trong blogspot

Như vậy thì bạn muốn xuất ra bao nhiều hình thì tạo cho nó 1 mảng kích thước ảnh
[100,200,300,400,500,600] và tỉ lệ được cắt "1:1"

Lấy hình từ bài viết kèm theo chú thích như sau:

<b:loop values='resizeImage(data:view.featuredImage, [50,100,150], "1:1")' var='image'>
    Hình : <img expr:src='data:image.url' />
    Size :
    <data:image.size />
</b:loop>

Kết quả:

Hướng dẫn resizeImage cắt hình trong blogspot

Kết luận:-

Trên đây là Hướng dẫn resizeImage cắt hình trong blogspot.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Truy cập Bypass Google Account APK để tải file APK nhé