water-mark-export v0.0.3

功能介绍

快速将你指定的元素通过canvas转为带有自定义水印显示的图片，并且支持png于jpg的预览和下载、导出。

安装

npm i water-mark-export -D
#or
yarn add water-mark-export -D
#of
pnpm i water-mark-export -D

快速上手

使用示例

import TransHtmlToImage from 'water-mark-export'

const transf = new TransHtmlToImage({
        // 绑定元素, 必须
        // 其他配置均为可选参数
        element: document.getElementById("box"),
        showWaterMark: true, // 是否添加水印，默认false
        autoDownload: false, // 是否生成图片后自动下载，默认false
        // fileName: 'file', // 导出图片的名称，默认当前时间戳
        // 水印配置项,皆为可选项
        // waterMark:{
          // textAlign: "center", // 文字排列
          // textBaseline: "middle", // 文本基线
          // font: "32px Microsoft Yahei", // 文本字体
          // fillStyle: "#c4c4c4", // 文本颜色
          // content: "请勿外传", // 文字内容
          // rotate: 45, // 旋转角度
          // spaceX: 200, // 水印列间距
          // spaceY: 200, // 水印行间距
          // numbers: 500, // 水印数量
          // alpha: 0.3, // 水印透明度
        // }
      });

transf.callOfTheGodDragon();

获取图片的url

// transf.callOfTheGodDragon();
// callOfTheGodDragon 是综合方法，toImage是转成canvas的实际触发方法
await transf.toImage()
const imgUrl = transf.getImgUrl()

手动触发下载

// 支持自动下载，可以在配置项中修改,需要先渲染才能下载
await transf.toImage()
transf.downloadImg();

动态设置水印

// transf.setWaterMark(type, value)
// type : "rotate" | "spaceX" | "spaceY" | "fillStyle" , 或者是水印配置对象
// value 实际值

transf.setWaterMark('fillStyle', '#ffffff')
transf.setWaterMark('alpha', '0.1')
transf.setWaterMark('rotate', '45')

await transf.setWaterMark(waterMarkOptions)

const imgUrl = transf.getImgUrl()

API

Props

Methods

通过组件实例调用的方法。

水印配置项