js导出图片添加水印

// js文件
let WaterMark = (() => {let painter = null// 获取画笔对象function getPainter(w,h) {if(painter === null){let canvas = document.createElement('canvas')canvas.width = wcanvas.height = hpainter = canvas.getContext('2d')}return painter}/***  画印章* （x,y） 印章左上角位置*  width,height 印章的宽高*/function drawRect(canvas,x,y,width,height) {let painter = canvas.getContext('2d')// 记录初始化状态painter.save();// 移动中心点并旋转painter.translate(x + 0.5 * width, y + 0.5 * height);painter.rotate(-Math. PI / 180 * 15);painter.translate(-(x + 0.5 * width), -(y + 0.5 * height));painter.beginPath();painter.lineWidth = "3";painter.rect(x, y, width, height);painter.strokeStyle = "red";painter.stroke();painter.closePath();painter.beginPath();painter.lineWidth = "7";painter.rect(x - 10, y - 10, width + 20, height + 20);painter.strokeStyle = "red";painter.stroke();painter.closePath();painter.beginPath();painter.lineWidth = "1";painter.font = "21px Arial normal";painter.textAlign = "center";painter.strokeText("内部信息 禁止外传",x+93,y+33)；painter.strokeStyle = "red";painter.closePath();// 恢复初始状态painter.restore();return canvas;}/*** 封装水印* （x,y）左上角位置*  text 水印字符*  angle 水印字符旋转角度*/function drawLongleMark(canvas,x,y,text,angle) {let painter = canvas.getContext('2d')// 记录初始化状态painter.save();painter.translate(x, y);painter.rotate(-Math. PI / 180 * angle);painter.translate(-x, -y);painter.beginPath();// 字体颜色painter.lineWidth = "1";painter.strokeStyle = "rgba(0,0,0,0.1)";// 字体painter.font = "12px 黑体";painter.textBaseline = 'middle';// 画字painter.strokeText(text,x,y);painter.closePath();// 恢复初始状态painter.restore();return canvas;}/*** 将水印文字铺满屏幕* （screenW,screenH）屏幕的宽高* （startX,startY） 第一个水印文字的位置*  intervalX 水印列与列的间隔*  intervalX 水印行与行的间隔*/function spreadMarkScreen(canvas,text,angle,screenW,screenH,startX,startY,intervalX,intervalY) {// 添加水印的位置let markX = startXlet markY = startY// 水印最右列距离距离屏幕右侧至少20while(markX < screenW - 20) {markY = startYwhile(markY <= screenH) {drawLongleMark(canvas,markX,markY,text,angle)// y轴添加高度markY+=intervalX}markX+=intervalX}return canvas}return {getPainter,drawRect,drawLongleMark,spreadMarkScreen,}
})()
export default WaterMark

基于canvas使用添加水印

js导出图片添加水印相关推荐

cytoscape.js导出图片png或jpg
cytoscape.js实现导出图片png cytoscape.js 导出样例展示 cytoscape.js `Export `方法 [详情](https://js.cytoscape.org/#co ...
js 给图片添加水印
如何在图片上添加水印? 1.把图片或者图片文件转成image元素 2.把转成的image转成canvas 3.在生成的canvas中添加水印先看效果 1.把图片或者图片文件转成image元素 fun ...
基于watermark.js给图片添加水印
依赖watermark.min.js文件 import watermark from "../../asset/watermark.min.js";/****fileUrl 文件地 ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
JS前端基于canvas给图片添加水印，并下载带有水印的图片
基于canvas给图片添加水印实现效果图图片添加水印的步骤 1.获取图片路径,将图片转换为canvas 2.canvas画布上绘制文字水印 3.水印绘制完成后,将canvas转换为图片格式 4.水 ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...

js导出图片添加水印

js导出图片添加水印相关推荐

最新文章

热门文章