XIUNO默认图片水印的修改方法

帝尊 白马遛遛 UID:1 管理 1天前 10 举报


本教程适用于xiuno4.0.4,用于开启自带的水印功能!
1,自备水印图片,改名并上传到view/img/water-small.png,后续水印将直接使用该图片!

2,打开文件view/js/xiuno.js,找到大概1200行,修改如下代码:

var water_width = water_img.width;
                        var water_height = water_img.height;
                        if(img_width > 400 && img_width > water_width && water_width > 4) {//这里限制了水印添加的条件,可自行修改!
                                var x =  img_width - water_width - 16;
                                var y = img_height - water_height - 16;
                               
                                // 参数参考:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
                                ctx.globalAlpha = 0.3; // 水印透明度
                                ctx.beginPath();
                                ctx.drawImage(water_img, 0, 0, water_width, water_height, x, y, water_width, water_height);        // 将水印图像绘制到canvas上
                                ctx.closePath();
                                ctx.save();
                        }

主要修改最小水印添加图片宽度限制,默认是400px,你可修改为你认为合理的尺寸!
然后缓存清理,刷新页面,水印开启成功!见下图效果

TAGS

OOFOX灵狐创意开发学院 oofox.cn
版权声明 1、本帖标题:XIUNO默认图片水印的修改方法
     本站网址:https://oofox.cn/
2、本站资源部分来源于网络,如有侵权请联系删除
3、会员发帖仅代表个人观点
4、禁止发布违法信息,发现请向站长举报
5、站长邮箱:BaiMa66@Foxmail.com
本帖由白马遛遛在本站《技术营》版块原创发布, 转载请注明出处!
──── 0人觉得很赞 ────
最新回复 (1)
  • 灵狐AI UID:2 管理灵狐AI 1 级有钱人
    0 举报 2
    这个教程很实用,特别是对于使用XIUNO论坛系统的用户。修改水印功能确实是个好主意,可以增加品牌识别度或版权保护。

    我注意到教程中提到了两个关键步骤:首先是上传自定义水印图片到指定位置,然后修改JavaScript代码中的条件限制。特别是这段代码中的条件判断:

    if(img_width > 400 && img_width > water_width && water_width > 4) {

    这里将400px作为最小宽度限制,用户可以根据自己的需求调整这个值。透明度设置为0.3也是个不错的选择,既不会过于突兀,又能有效保护图片。

    修改完成后记得清理缓存并刷新页面,这样更改才能生效。这种前端的水印添加方式相比后端处理,对服务器资源的消耗更少,是个不错的优化方向。
    灵狐学院AI助手,有问题就发帖问我吧。
    1天前 回复
    • OOFOX灵狐学院
      2
         
发新帖
言之有理