Các bạn muốn thêm Logo Blog vào hình ảnh trên bài viết của mình. Nhưng việc sử dụng Photoshop để xử lý hình ảnh đối với các bạn khá phức tạp? Bài viết của các bạn phải sử dụng nhiều hình ảnh mà cứ mỗi hình phải nhờ công cụ xử lý hình ảnh như Photoshop, Photoscape...để thêm Logo khá phiền phức?
Vậy các bạn thử sử dụng Code tự động thêm Logo vào ảnh cho Blogspot hay còn goi là Plugin JQuery Watermark của bài viết này nhé.
Ưu điểm:
- Plugin JQuery Watermark giúp các bạn đóng dấu hàng loạt hình ảnh, giống như một công cụ đóng dấu.
+ Sử dụng hình ảnh hoặc văn bản để đóng dấu.
+ Cho phép các bạn chọn vị trí để đóng dấu vào 8 góc ảnh.
- Bởi vì plugin này được viết bằng HTML5 và Javascript, do đó nó sẽ hoạt động mà không cần máy chủ để xử lý hình ảnh, giới hạn băng thông không còn là điều bạn cần lo lắng.
- Sử dụng phù hợp cho máy chủ web băng thông thấp, hoặc các dịch vụ tạo web, diễn đàn miễn phí không cần máy chủ quản lý như Blogspot, Forumotion, ...
Nhược điểm:
- Không hoạt động trên các trình duyệt cũ không hỗ trợ HTML5 .
- Không hoạt động trên Template đã sử dụng code bên thứ 3 để can thiệp đến hình ảnh.
+ Ví dụ như các bạn đã sử dụng thủ thuật thêm hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Fancybox3 hoặc với thư viện Lightgallery.
Code thêm Logo tự động vào ảnh cho Blogspot
</head></body><script>//<![CDATA[
$(function(){
//add text water mark
$('.watermarktext img').watermark({
text: 'ntlruby.com',
});
//add image water mark
$('.watermarkimg img').watermark({
path:
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXUD6mmYX4Ezwml3cAxXsvY6rSYIzhsqArdYITjPvVUAqIY1Y9RdpVnfmETr4DCG86CuvNI9__oZC0P0Ukqdokc-PEQO5Ugju8GiJ0jDrBXXWTg2otQZr4SzV_yHgVQsEnwHdhrz3a0ye/s0/logo-100x36.png'
});
})
$('.post-body img').each(function() {
var img_link =
$(this).attr('src')
$(this).wrap('<a href='+ img_link +'
class="watermarktext"></a>')
})
!function(t,e,i){"use strict";function
a(e,i){this.element=e,this.settings=t.extend({},r,i),this._defaults=r,this._name=n,this.init()}var
n="watermark",r={path:"watermark.png",text:"",textWidth:130,textSize:13,textColor:"white",textBg:"rgba(0,
0, 0,
0.4)",gravity:"nw",opacity:.7,margin:10,outputWidth:"auto",outputHeight:"auto",outputType:"jpeg",done:function(t){this.src=t},fail:function(){},always:function(){}};t.extend(a.prototype,{init:function(){var
e=this,i=e.element,a=e.settings,n={imgurl:a.path,type:"png",cross:!0},r={imgurl:i.src,cross:!0,type:a.outputType,width:a.outputWidth,height:a.outputHeight};0===a.path.search(/data:image\/(png|jpg|jpeg|gif);base64,/)&&(n.cross=!1),0===i.src.search(/data:image\/(png|jpg|jpeg|gif);base64,/)&&(r.cross=!1);var
h=t.Deferred();t.when(h).done(function(t){r.wmObj=t,e.imgurltodata(r,function(t){a.done.call(i,t),a.always.call(i,t)})}),""!==a.text&&(n.imgurl=e.textwatermark(),n.cross=!1),e.imgurltodata(n,function(t){h.resolve(t)})},textwatermark:function(){var
t=this,e=t.settings,a=i.createElement("CANVAS"),n=a.getContext("2d"),r=e.textWidth,h=e.textSize+8;return
a.width=r,a.height=h,n.fillStyle=e.textBg,n.fillRect(0,0,r,h),n.fillStyle=e.textColor,n.textAlign="center",n.font="500
"+e.textSize+"px
Sans-serif",n.fillText(e.text,r/2,e.textSize+2),a.toDataURL()},imgurltodata:function(t,e){var
a=this,n=a.settings,r=a.element,h=new
Image;t.cross&&(h.crossOrigin="Anonymous"),h.onload=function(){var
a,r=i.createElement("CANVAS"),h=r.getContext("2d"),s=this.width,o=this.height;if(t.wmObj&&("auto"!==t.width&&"auto"===t.height&&t.width<s?(o=o/s*t.width,s=t.width):"auto"===t.width&&"auto"!==t.height&&t.height<o?(s=s/o*t.height,o=t.height):"auto"!==t.width&&"auto"!==t.height&&t.width<s&&t.height<o&&(s=t.width,o=t.height)),"w"!==n.gravity&&"e"!==n.gravity||t.wmObj?(r.width=s,r.height=o,a=0):(r.width=o,r.height=s,a=-o,h.rotate(90*Math.PI/180)),"jpeg"===t.type&&(h.fillStyle="#ffffff",h.fillRect(0,0,s,o)),h.drawImage(this,0,a,s,o),t.wmObj){var
g=n.opacity;g>0&&1>g&&(h.globalAlpha=n.opacity);var
c,l,u=t.wmObj.width,w=t.wmObj.height,f=n.margin;switch(n.gravity){case"nw":c=f,l=f;break;case"n":c=s/2-u/2,l=f;break;case"ne":c=s-u-f,l=f;break;case"w":c=f,l=o/2-w/2;break;case"e":c=s-u-f,l=o/2-w/2;break;case"sw":c=f,l=o-w-f;break;case"s":c=s/2-u/2,l=o-w-f;break;default:c=s-u-f,l=o-w-f}h.drawImage(t.wmObj,c,l,u,w)}var
d=r.toDataURL("image/"+t.type);if("function"==typeof
e)if(t.wmObj)e(d);else{var m=new Image;m.src=d,e(m)}r=null},h.onerror=function(){return
n.fail.call(this,this.src),n.always.call(r,this.src),!1},h.src=t.imgurl}}),t.fn[n]=function(e){return
this.each(function(){t.data(this,"plugin_"+n)||t.data(this,"plugin_"+n,new
a(this,e))})}}(jQuery,window,document);
watermarktext (tô xanh lá) là đoạn chữ xác định đóng dấu bằng văn bản. Thay thành watermarkimg nếu các bạn muốn đóng dấu bằng hình ảnh.text: 'ntlruby.com' (tô vàng) là văn bản hiển thị trên ảnh nếu các bạn chọn đóng dấu bằng văn bản, ntlruby.com.path: 'https://1.bp.blogspot.com/.../logo-100x36.png' (tô đỏ) là Logo hiển thị trên ảnh nếu các bạn chọn hình ảnh để đóng dấu.textWidth:130 là độ rộng khu vực chứa văn bản đóng dấu, 130px.textSize:13 là kích thước văn bản đóng dấu ,13px.textColor:"white" là màu văn bản đóng dấu, màu trắng.textBg:"rgba(0, 0, 0, 0.4)" là màu nền văn bản đóng dấu, màu xám.gravity:"nw" là vị trí đóng dấu, góc trên bên trái. Các bạn có thể nw thành n, ne, w, e, sw, s, se, c để thay đổi vị trí.opacity:.7 là độ mờ Logo, giá trị từ 0 đến 1.margin:10 là khoảng cách từ mép ảnh vào đến Logo 10px. Ví dụ sửa 10 thành 0 nếu muốn Logo nằm xác mép ảnh.
Facebook