扫码阅读

手机扫码阅读

Odoo丨如何在Odoo中添加水印？

381 2023-09-09

图片水印 image 页面 repeat

Odoo

神州数码云基地

在 Odoo 上的尝试、调研与分享

在Odoo中如何添加水印

为了防止信息的泄露，水印作为一种防泄密的方式，被使用的频率越来越高。

那么在Odoo中，如何添加水印呢？

其实添加的方法有很多，如利用svg生成背景图，重复的dom元素覆盖等等。

本文主要讲解利用canvas输出背景图的方式来添加水印。

原理简介

首先创建一个canvas画布，利用canvas的特点绘制出一个带有文字字样的水印区域，然后将这个水印区域通过 toDataURL方法输出为一个图片，并将这个图片设置为背景图，通过 backgroud-repeat：repeat 样式填满这个屏幕。

实现方法

# 封装一个生成图片的函数

先创建一个canvas元素，标签用于使用 JavaScript 动态绘制图形

但是元素没有自己的绘图能力（它只是一个图形容器），因此我们需要通过 getContext()方法获得一个画布对象。

该对象提供在画布上绘图的方法和属性，可用于在画布上绘制文本、线条、框、圆等，具体实现如下 ⬇

createImg(imgOptions = {}) { const canvas = document.createElement('canvas'); const text = imgOptions.content || "Test"; canvas.width = imgOptions.width || 200; canvas.height = imgOptions.height || 200; const ctx = canvas.getContext('2d'); if (ctx) { ctx.font = imgOptions.font || "15px PingFang SC, sans-serif"; ctx.fillStyle = imgOptions.color || "rgba(150, 160, 150, 0.5)"; ctx.rotate(imgOptions.rotateDegree); ctx.textAlign = 'center'; ctx.fillText(text, imgOptions.x || 100, imgOptions.y || 100); } return canvas.toDataURL('image/png');},

canvas.toDataURL()方法返回一个用于图片展示的data url，即我们常说的base64地址。

其接受两个参数 type 和 encoderOptions ：

type：可选，转换的图片类型，默认值是image/png，还可以是image/jpeg，甚至image/webp前提浏览器支持，如Chrome）等。

encoderOptions：可选，转换的图片质量。范围是0到1，不在该取值范围，则取默认值0.92。此参数要想有效，type 需要是 image/jpeg 或者 image/webp，其他 type 值无效。

# 将图片作为背景图

添加至页面上并铺满页面

将生成图片的函数封装好之后，我们就可以把该图片作为背景图片平铺到页面上，实现添加水印的效果了，具体实现如下 ⬇

generateWaterMark({ className = 'my_watermarked', width = 360, height = 240, content = 'Test', font = '15px PingFang SC, sans-serif', color = 'rgba(150, 160, 150, 0.5)', rotate = -20, position = 'absolute', top = 0, left = 0, zIndex = 1000, }) { const option = { width, height, content, font, color, rotateDegree: (rotate * Math.PI) / 180, };  const dataUri1 = this.createImg({ ...option, x: 80, y: 120, }); const dataUri2 = this.createImg({ ...option, x: 200, y: 280, });  let defaultStyle = document.createElement('style'); defaultStyle.innerHTML = `.${className}:after { content: ''; display: block; width: 100%; height: 100%; ${top || top === 0 ? `top: ${top}px;` : ''} ${left || left === 0 ? `left: ${left}px;` : ''} background-repeat: repeat; pointer-events: none; }`;  let styleEl = document.createElement('style'); styleEl.innerHTML = `.${className}:after { ${position ? `position: ${position}` : ''}; ${zIndex ? `z-index:${zIndex}` : ''}; background-image:unset; background-size: ${option.width}px ${option.height}px; }`; document.head.appendChild(defaultStyle); document.head.appendChild(styleEl);},

可以看到，我们首先创建了两个style元素，然后利用css样式

background-image:unset

background-repeat: repeat

把生成的两张图片作为背景图片进行填充并铺满整个页面（两张图片通过传入的文字偏移量不同，来实现页面上的交错效果，也可以选用一张或多张）；

zIndex表示图片所处图层，要尽可能设置的大一些，让水印处于最底层。

当然也可以在此方法中修改图片的大小，文字颜色，字体大小等。

最后，我们可以在

addons/web/static/src/js/chrome/web_client.js

(不同版本路径可能不同)的start()函数中调用该方法

并在需要添加水印的页面中加上classs="my_watermarked即可，可以添加到body上，这样所有页面均生效 ⬇

start: function () { core.bus.on('change_menu_section', this, function (menuID) { this.do_push_state(_.extend($.bbq.getState(), { menu_id: menuID, })); }); <-- code start --> const watermark_option = { content: "这是一个水印", className: 'my_watermarked', }; this.genWaterMark(watermark_option); <-- code end -->  return this._super.apply(this, arguments);},

注意：该方法是通过class来确定渲染水印，因此class的名称一定要与传入的值一致。

展示效果

重启服务之后，可以看到页面上已经出现我们需要的水印了。

Tips：由于该方法是通过class来渲染水印，很容易被稍微懂点前端知识的人修改，接下来介绍一种防修改的方式，供参考：

利用 Web API 接口 MutationObserver 来监听body元素的变化，MutationObserver可以用来监听 DOM 变动。

DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver 事件。

当 body 元素的class发生变化，触发 MutationObserver 事件，重新将class添加进去，这样就可以防止误删或修改了。

当然所有的防修改方案都不是绝对的，防君子不防小人。

以上就是今天关于Odoo

如何添加水印的分享

希望对你有帮助！

本期作者

喻炎

原文链接： http://mp.weixin.qq.com/s?__biz=Mzg5MzUyOTgwMQ==&mid=2247513494&idx=1&sn=a2a607f6896a9afed87110509f028853&chksm=c02f8e30f758072618cf859a479df884c8f66b89252791144e04be4625b342ef5a03a1ee3c55#rd