The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Watermark script problem

5 posters

Go down

Solved Watermark script problem

Post by sivastar February 3rd 2023, 1:01 am

Code:

(function($, window, document, undefined) {
    'use strict';

    var pluginName = 'watermark',
        defaults = {
            path: 'watermark.png',
            dataPath: false,

            text: '',
            textWidth: 130,
            textSize: 13,
            textColor: 'white',
            textBg: 'rgba(0, 0, 0, 0.4)',

            gravity: 'se', // nw | n | ne | w | e | sw | s | se | c
            opacity: 0.7,
            margin: 0,
            fullOverlay: false,

            outputWidth: 'auto',
            outputHeight: 'auto',
            outputType: 'jpeg', // jpeg | png | webp

            done: function(imgURL) {
                this.src = imgURL;
            },
            fail: function(/*imgURL*/) {
                // console.error(imgURL, 'image error!');
            },
            always: function(/*imgURL*/) {
                // console.log(imgURL, 'image URL!');
            },
        };

    function Plugin(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function() {
            var _this = this,
                ele = _this.element,
                set = _this.settings,
                actualPath = set.dataPath ? $(ele).data(set.dataPath) : set.path,
                wmData = {
                    imgurl: actualPath,
                    type: 'png',
                    cross: true,
                },
                imageData = {
                    imgurl: ele.src,
                    cross: true,
                    type: set.outputType,
                    width: set.outputWidth,
                    height: set.outputHeight,
                };

            // Watermark dạng base64
            if (actualPath.search(/data:image\/(png|jpg|jpeg|gif);base64,/) === 0) {
                wmData.cross = false;
            }

            // Ảnh đang duyệt dạng base64
            if (ele.src.search(/data:image\/(png|jpg|jpeg|gif);base64,/) === 0) {
                imageData.cross = false;
            }

            var defer = $.Deferred();

            $.when(defer).done(function(imgObj) {
                imageData.wmObj = imgObj;
                _this.imgurltodata(imageData, function(dataURL) {
                    set.done.call(ele, dataURL);
                    set.always.call(ele, dataURL);
                });
            });

            if (set.text !== '') {
                wmData.imgurl = _this.textwatermark();
                wmData.cross = false;
            }

            _this.imgurltodata(wmData, function(imgObj) {
                defer.resolve(imgObj);
            });
        },

        /**
        * Chuyển text sang ảnh để làm watermark
        * @returns {String} URL ảnh dạng base64
        */
        textwatermark: function() {
            var _this = this,
                set = _this.settings,
                canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                w = set.textWidth,
                h = set.textSize + 8;

            canvas.width = w;
            canvas.height = h;

            ctx.fillStyle = set.textBg;
            ctx.fillRect(0, 0, w, h);

            ctx.fillStyle = set.textColor;
            ctx.textAlign = 'center';
            ctx.font = '500 ' + set.textSize + 'px Sans-serif';

            ctx.fillText(set.text, w / 2, set.textSize + 2);

            return canvas.toDataURL();
        },

        /**
        * Chuyển ảnh sang dạng base64
        * @param  {Object}  data    Các thông số thiết lập để phân biệt loại ảnh và với watermark
        * @param  {String}  callback URL ảnh dạng base64
        */
        imgurltodata: function(data, callback) {
            var _this = this,
                set = _this.settings,
                ele = _this.element;

            var img = new Image();

            if (data.cross) {
                img.crossOrigin = 'Anonymous';
            }

            img.onload = function() {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');

                var w = this.width, // image height
                    h = this.height, // image width
                    ctxH;

                if (data.wmObj) {
                    if (data.width !== 'auto' && data.height === 'auto' && data.width < w) {
                        h = (h / w) * data.width;
                        w = data.width;
                    } else if (data.width === 'auto' && data.height !== 'auto' && data.height < h) {
                        w = (w / h) * data.height;
                        h = data.height;
                    } else if (data.width !== 'auto' && data.height !== 'auto' && data.width < w && data.height < h) {
                        w = data.width;
                        h = data.height;
                    }
                }

                // Xoay dọc watermark sử dụng text, khi ở vị trí giữa mép dọc
                if ((set.gravity === 'w' || set.gravity === 'e') && !data.wmObj) {
                    canvas.width = h;
                    canvas.height = w;
                    ctxH = -h;
                    ctx.rotate((90 * Math.PI) / 180);
                } else {
                    canvas.width = w;
                    canvas.height = h;
                    ctxH = 0;
                }

                // Tô nền trắng cho ảnh xuất ra dạng jpeg
                if (data.type === 'jpeg') {
                    ctx.fillStyle = '#ffffff';
                    ctx.fillRect(0, 0, w, h);
                }

                ctx.drawImage(this, 0, ctxH, w, h);

                // Xử lý watermark được chèn vào
                if (data.wmObj) {
                    // Độ trong suốt
                    var op = set.opacity;
                    if (op > 0 && op < 1) {
                        ctx.globalAlpha = set.opacity;
                    }

                    // Vị trí chèn, gọi theo hướng trên bản đồ
                    var wmW = set.fullOverlay ? w : data.wmObj.width,
                        wmH = set.fullOverlay ? h : data.wmObj.height,
                        pos = set.margin,
                        gLeft,
                        gTop;

                    switch (
                        set.gravity // nw | n | ne | w | e | sw | s | se | c
                    ) {
                        case 'nw': // Tây bắc
                            gLeft = pos;
                            gTop = pos;
                            break;
                        case 'n': // Bắc
                            gLeft = w / 2 - wmW / 2;
                            gTop = pos;
                            break;
                        case 'ne': // Đông Bắc
                            gLeft = w - wmW - pos;
                            gTop = pos;
                            break;
                        case 'w': // Tây
                            gLeft = pos;
                            gTop = h / 2 - wmH / 2;
                            break;
                        case 'e': // Đông
                            gLeft = w - wmW - pos;
                            gTop = h / 2 - wmH / 2;
                            break;
                        case 'sw': // Tây Nam
                            gLeft = pos;
                            gTop = h - wmH - pos;
                            break;
                        case 's': // Nam
                            gLeft = w / 2 - wmW / 2;
                            gTop = h - wmH - pos;
                            break;
                        case 'c': // Trung tâm
                            gLeft = w / 2 - wmW / 2;
                            gTop = (h - wmH) / 2;
                            break;
                        default:
                            // Đông Nam
                            gLeft = w - wmW - pos;
                            gTop = h - wmH - pos;
                    }
                    ctx.drawImage(data.wmObj, gLeft, gTop, wmW, wmH);
                }

                // Xuất ra url ảnh dạng base64
                var dataURL = canvas.toDataURL('image/' + data.type);

                if (typeof callback === 'function') {
                    if (data.wmObj) {
                        // Đã có watermark
                        callback(dataURL);
                    } else {
                        // watermark
                        var wmNew = new Image();
                        wmNew.src = dataURL;
                        callback(wmNew);
                    }
                }

                canvas = null;
            };

            // Xử lý ảnh tải lỗi hoặc có thể do từ chối CORS headers
            img.onerror = function() {
                set.fail.call(this, this.src);
                set.always.call(ele, this.src);
                return false;
            };

            img.src = data.imgurl;
        },
    });

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery, window, document);

Code:
$(function() {
  $('..postbody .content img, .mod_news img, .message-text img').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});

This script applying watermark including smileys...

How to remove watermark from smileys?


Last edited by sivastar on February 3rd 2023, 3:24 pm; edited 1 time in total
sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Back to top Go down

Solved Re: Watermark script problem

Post by BlackScorpion February 3rd 2023, 1:23 am

where did you get the script from?
BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 7009
Reputation : 919
Language : English
Location : USA

https://help.forumotion.com/f6-graphic-design-section

Back to top Go down

Solved Re: Watermark script problem

Post by sivastar February 3rd 2023, 1:33 am

sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Back to top Go down

Solved Re: Watermark script problem

Post by BlackScorpion February 3rd 2023, 1:39 am


That's where you need to go for help with that script, since we did not create it
BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 7009
Reputation : 919
Language : English
Location : USA

https://help.forumotion.com/f6-graphic-design-section

skouliki and TonnyKamper like this post

Back to top Go down

Solved Re: Watermark script problem

Post by Niko February 3rd 2023, 1:45 pm

Hello there,

if you use this to add the watermark
Code:
$(function() {
  $('..postbody .content img, .mod_news img, .message-text img').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});

and if I understood well - you want that to happen on every image but the smiles.. then you can use this instead:
Code:
$(function() {
  $('..postbody .content img:not([src*="fa/i/smiles"]), .mod_news img:not([src*="fa/i/smiles"]), .message-text img:not([src*="fa/i/smiles"])').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});

Give a try and let me know Wink
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

SarkZKalie likes this post

Back to top Go down

Solved Re: Watermark script problem

Post by sivastar February 3rd 2023, 2:13 pm

does not work this code @Niko

still the same
sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Back to top Go down

Solved Re: Watermark script problem

Post by Niko February 3rd 2023, 2:19 pm

@sivastar do you have a topic where you have smiles, so that I can test it live?
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Watermark script problem

Post by sivastar February 3rd 2023, 2:21 pm

sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Back to top Go down

Solved Re: Watermark script problem

Post by Niko February 3rd 2023, 2:26 pm

Try this one instead

Code:
$(function() {
  $('..postbody .content img:not([src*="/smiles/"]), .mod_news img:not([src*="/smiles/"]), .message-text img:not([src*="/smiles/"])').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

sivastar and TonnyKamper like this post

Back to top Go down

Solved Re: Watermark script problem

Post by sivastar February 3rd 2023, 2:28 pm

Thank you @Niko

now working. salut
sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Niko likes this post

Back to top Go down

Solved Re: Watermark script problem

Post by skouliki February 3rd 2023, 2:43 pm

When your request is complete, please mark it as Solved.
skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Watermark script problem

Post by Ape February 3rd 2023, 2:45 pm

Hi @sivastar is this topic now solved ?
If yes please remember to click the mark solved button on your topic's that are solved so we can move and lock them.
To mark this topic solved please press the mark solved button that can be found at the top left hand side at the top of this topic.


Last edited by Ape on February 3rd 2023, 2:56 pm; edited 1 time in total


Watermark script problem Left1212Watermark script problem Center11Watermark script problem Right112
Watermark script problem Ape_b110
Watermark script problem Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Watermark script problem

Post by Niko February 3rd 2023, 2:53 pm

last message sorry, I noticed I put a double point at the beginning, remove it to have this script:

Code:
$(function() {
  $('.postbody .content img:not([src*="/smiles/"]), .mod_news img:not([src*="/smiles/"]), .message-text img:not([src*="/smiles/"])').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});

from
Code:
$('..postbody
to
Code:
$('.postbody
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Ape, sivastar and tikky like this post

Back to top Go down

Solved Re: Watermark script problem

Post by sivastar February 3rd 2023, 3:22 pm

Niko wrote:last message sorry, I noticed I put a double point at the beginning, remove it to have this script:

Code:
$(function() {
  $('.postbody .content img:not([src*="/smiles/"]), .mod_news img:not([src*="/smiles/"]), .message-text img:not([src*="/smiles/"])').watermark({
    path: 'https://i.servimg.com/u/f27/14/94/21/38/icons-10.png'
  });
});

from
Code:
$('..postbody
to
Code:
$('.postbody

Okay @Niko Thank you.
sivastar
sivastar
Forumember

Male Posts : 152
Reputation : 16
Language : Tamil
Location : Malaysia

http://www.eegarai.net

Niko likes this post

Back to top Go down

Solved Re: Watermark script problem

Post by skouliki February 3rd 2023, 3:50 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum