Hướng dẫn tạo Watermark tự động cho ảnh trên Website

Hướng dẫn tạo Watermark tự động cho ảnh trên Website

Bài viết này được tham khảo từ internet. Ưu điểm của code là có thể thêm chữ và ảnh logo chèn vào ảnh trong bài viết, đóng dấu bản quyền vào ảnh. Nhược điểm là nó lại biến về base64 mà mình không thích lắm.

Mình sẽ hướng dẫn các bạn ở mã nguồn blogger.

Hướng dẫn tạo Watermark tự động cho ảnh trên Website

Đầu tiên cho code js này vào trước thẻ đóng </body>.
<script src="https://rawcdn.githack.com/emusiccolection/wikianow/088f6ee12968bdc2e97d4fb60e7b13eefaf7a5eb/watermark-image.js"></script>
<script>// path to the watermark image
$(function(){
//add text water mark;
$('.watermarktext img').watermark({
text: 'wikianow.com',
textWidth: 100,
textColor: 'white'
});
//add image water mark
$('.watermarkimg img').watermark({
path: '[]'
});
})
</script>
Sau đó tìm <data:post.body/>, mỗi trang web sẽ khác nhau ở phần này và trong blogger sẽ có nhiều vị trí như thế. Đổi lại ở vị trí tìm được bằng code bên dưới:
  • Đối với text:
<div class="watermarktext"> <data:post.body/> </div>
  • Đối với image:
<div class="watermarkimg"> <data:post.body/> </div>
Thay thế từng vị trí <data:post.body/> để javascript hiển thị đúng.
Chúc bạn thành công!!!

Bạn có thể thích những bài đăng này