如何将水印文本添加到图像上并相应地显示在 html 电子邮件中？
发布于2023-03-18 16:14 阅读(1189) 评论(0) 点赞(9) 收藏(5)
我应该将水印文本对角放置到图像上，这两个输入都是通过谷歌表单提交的。但在我创建 gform 之前，我想先测试一下，当我们将它们作为 html 电子邮件发送时，是否可以显示带有水印文本的完整图像。我参考了我的 html 代码的答案对角线水印文本，并编写了一个简单的 GAS 来调用 html 并发送电子邮件。当我在 html 电子邮件编辑器中粘贴 html 代码时，输出看起来符合预期。但是，当我运行 gs 文件并查看电子邮件收件箱时，水印文本不会覆盖在预期的图像上。水印只是打印在图像下方。任何人都可以帮助解决这个问题吗？或者这甚至有可能实现吗？下面是我的 gs 和 html 代码。提前TQVM。
我的 GS 代码：-
function myKad() {
var myIC=HtmlService.createTemplateFromFile("MyKad");
var mykad = myIC.evaluate().getContent();
MailApp.sendEmail('dellzy76@gmail.com','Your MyKad','',{htmlBody:mykad});
}
我的 HTML 代码：-
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<style>#watermark {
height: 200px;
width: 300px;
position: initial;
}
#watermark img {
max-width: 100%;
}
#watermark p {
max-width: 20%;
position: absolute;
top: 0;
left: 0.2;
color: #FF0000;
opacity: 100%;
font-size: 10px;
pointer-events: none;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
}
</style>
<body>
<div id="watermark">
<br>
<br>
<img src="https://share1.cloudhq-mkt3.net/563d38db6253d3.jpeg" alt="MyKad" width="250" height="160">
<p><br>
<br><br><b>----------------
<br><i>This is just a copy for JPJ purposes ONLY
<br>------------------<b></b></p>
</div>
</body>
</html>
预期的：
电子邮件收件箱中的当前输出：
解决方案
不幸的是，Gmail HTML 不像普通 HTML 那样具有包容性
因此，您将不得不使用不同类型的 CSS 使其工作，或者尝试一种变通方法，例如在单独的 HTML 实例中生成图像，然后将其作为图像导出到驱动器，然后将其作为图像附加到邮件中.
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/508737/9979ad03f516996d1bde/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力