当前位置: 首页 > news >正文

Demo: 给图片添加自定义水印并下载

给图片添加自定义水印并下载

在这里插入图片描述

<template><div class="wrap"><div class="optea"><div class="file-upload"><p>选择图片</p><el-button type="text" style="color: #c00;"><label for="uploads"><i class="el-icon-upload2" style="margin-right: 5px;"></i>选择需要添加水印的图片</label></el-button><inputtype="file"id="uploads"hiddenaccept="image/png, image/jpeg, image/gif, image/jpg"@change="uploadImg($event, 1)"/></div><p>水印文字</p><el-inputv-model="watermarkOptions.text"placeholder="请输入水印内容"></el-input><p>字体颜色</p><el-color-picker v-model="watermarkOptions.color"></el-color-picker><p>旋转角度</p><el-sliderv-model="watermarkOptions.rotate":min="0":max="360"></el-slider><p>透明度</p><el-sliderv-model="watermarkOptions.alpha":min="0":max="100"></el-slider><p>文本间距</p><el-sliderv-model="watermarkOptions.width":min="0":max="100"></el-slider><p>字体大小</p><el-sliderv-model="watermarkOptions.fontSize":min="0":step="0.5":max="50"></el-slider></div><div><el-button@click="handleDown"class="download-btn"type="primary"plainicon="el-icon-download">下载水印图片</el-button><div class="preview" ref="previewImg"><img :src="preImg || defaultimg" alt="" /><div class="watermark" :style="{ background: paint }"></div></div></div></div>
</template>
<script>
/* eslint-disable */
import defaultimg from "@/assets/img/headPortrait.jpg";
import DomToImage from "dom-to-image";
export default {data() {return {defaultimg,preImg: "",watermarkOptions: {text: "仅供 xxx 验证使用",fontSize: 10,width: 5,color: "#000000",alpha: 35,rotate: 35}};},methods: {uploadImg(e, num) {//上传图片// this.option.imgvar file = e.target.files[0];if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");return false;}var reader = new FileReader();reader.onload = e => {let data;if (typeof e.target.result === "object") {// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]));} else {data = e.target.result;}if (num === 1) {this.preImg = data;}};// 转化为base64reader.readAsDataURL(file);// 转化为blob// reader.readAsArrayBuffer(file)},handleDown() {let node = this.$refs.previewImg;let that = this;DomToImage.toPng(node).then(function(dataUrl) {var oLink = document.createElement("a");oLink.download = "水印图片.png";oLink.href = dataUrl;oLink.click();that.$nextTick(() => {that.$message.success("水印图片下载成功");});}).catch(function(error) {console.error("oops, something went wrong!", error);that.$message.error("下载失败");});}},computed: {paint() {// 文字长度const wordWidth =this.watermarkOptions.fontSize *this.watermarkOptions.text.split("").length;const width = wordWidth + this.watermarkOptions.width;let svgText = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${width}px"><text x="50%" y="50%"alignment-baseline="middle"text-anchor="middle"stroke="${this.watermarkOptions.color}"opacity="${this.watermarkOptions.alpha / 100}"transform="translate(${width / 2}, ${width / 2}) rotate(${this.watermarkOptions.rotate}) translate(-${width / 2}, -${width / 2})"font-weight="100"font-size="${this.watermarkOptions.fontSize}"font-family="microsoft yahe">${this.watermarkOptions.text}</text></svg>`;return `url(data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgText)))})`;}}
};
</script><style lang="scss" scoped>
.wrap {padding: 10px 20px;display: flex;justify-content: flex-start;align-items: center;p {margin: 5px 0;margin-bottom: 10px;font-weight: 600;}.download-btn {margin: 0 15px 15px;}.optea {width: 500px;}.preview {position: relative;margin-left: 20px;min-width: 750px;img {width: 100%;height: 100%;}.watermark {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}}
}
</style>

相关文章:

Demo: 给图片添加自定义水印并下载

给图片添加自定义水印并下载 <template><div class"wrap"><div class"optea"><div class"file-upload"><p>选择图片</p><el-button type"text" style"color: #c00;"><label f…...

黑马苍穹外卖学习Day5

文章目录 Redis学习Redis简介准备工作Redis常用数据类型介绍各数据类型的特点Redis常用命令字符串操作命令哈希操作命令列表操作命令集合操作命令有序集合操作命令通用操作命令 在Java中操作Redis导入Spring Data Redis坐标配置Redis数据源编写配置类&#xff0c;创建RedisTemp…...

【.NET Core】可为null类型详解

【.NET Core】可为null类型详解 文章目录 【.NET Core】可为null类型详解一、概述二、可为空的值类型2.1 声明和赋值2.2 检查可为空值类型2.3 基础类型与可为空的值类型互换2.4 可为空的值类型装箱和取消装箱2.5 如何确定可为空的值类型 三、可为 null 的引用类型 一、概述 nu…...

基于知识图谱的健康知识问答系统

基于知识图谱的健康知识问答系统 引言数据集与技术选型数据集技术选型 系统功能与实现数据导入与图数据库构建问答任务设计与实现1. 实体提取2. 用户意图识别 前端聊天界面与问答系统 结语 引言 随着互联网的发展&#xff0c;人们对健康知识的需求逐渐增加。为了更方便地获取健…...

橘子学K8S03之容器的理解

前面我们知道了容器是通过对一个普通的linux进程进行隔离和限制实现的一种特殊视角下的进程表现。而隔离和限制的实现技术分别是"Namespace"和“Cgroups”,在这两种机制的控制下&#xff0c;我们需要知道容器的本质是一种特殊的进程。 我们现在有了这个认知之后&…...

算法第十二天-矩形区域不超过K的最大数值和

矩形区域不超过K的最大数值和 题目要求 解题思路 来自[宫水三叶] 从题面来看显然是一道[二维前缀和]的题目。本题预处理前缀和的复杂度为O(m* n) 搜索所有子矩阵需要枚举[矩形左上角]和[矩形右下角]&#xff0c;复杂度是 O ( m 2 ∗ n 2 ) O(m^2 * n^2) O(m2∗n2)&#xff0c…...

【js】js数组对象去重:

文章目录 一、Map()二、对象访问属性的方法三、indexOf()四、双层for循环 let arrObj [{ name: "小红", id: 1 },{ name: "小橙", id: 1 },{ name: "小黄", id: 4 },{ name: "小绿", id: 3 },{ name: "小青", id: 1 },{ na…...

python高校舆情分析系统+可视化+情感分析 舆情分析+Flask框架(源码+文档)✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…...

Phaser详解

Phaser是一个相对较新且功能强大的同步原语&#xff0c;它于Java 7中引入&#xff0c;用于协调并行任务的执行。与CyclicBarrier和CountDownLatch等传统的同步工具相比&#xff0c;Phaser提供了更灵活和更高级的功能&#xff0c;特别是在处理动态和可变的并行任务集合时。 1.P…...

2个nodejs进程利用redis 实现订阅发布

1.新建文件 redis_db.js use strict;const redis require(redis); const options {host: "127.0.0.1",port: 6379,password: "123456", // CONFIG SET requirepass "123456" }var array [] for(var i0; i<3; i){const client redis.crea…...

LeetCode——2397. 被列覆盖的最多行数

通过万岁&#xff01;&#xff01;&#xff01; 题目&#xff1a;给你一个二维数组&#xff0c;然后里面是0和1&#xff0c;然后让你从里面选择numSelect列&#xff0c;使得去掉选择的列以后不存在1的行的数量最少。思路&#xff1a; 看到这个题目&#xff0c;本来以为是每一列…...

java通过HttpClient方式实现https请求的工具类(绕过证书验证)

目录 一、引入依赖包二、HttpClient方式实现的https请求工具类三、测试类 一、引入依赖包 引入相关依赖包 <!--lombok用于简化实体类开发--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><option…...

【自学笔记】01Java基础-07面向对象基础-04接口与内部类详解

记录学习Java基础中有关接口类和内部类的知识。 1 接口 interface 关键字用于定义接口类&#xff0c;接口类是一系列方法的声明&#xff0c;一般只有方法的特征没有方法的实现&#xff0c;因此可以被不同的类接入实现&#xff0c;而这些实现可以具有不同的行为&#xff08;功…...

【cmu15445c++入门】(5)c++中的模板类

一、template模板类 除了模板方法【cmu15445c入门】(4)c中的模板方法 模板也可以用来实现类 二、代码 /*** file templated_classes.cpp* author Abigale Kim (abigalek)* brief Tutorial code for templated classes.*/// Includes std::cout (printing). #include <io…...

MongoDB聚合:$bucket

$bucket将输入文档按照指定的表达式和边界进行分组&#xff0c;每个分组为一个文档&#xff0c;称为“桶”&#xff0c;每个桶都有一个唯一的_id&#xff0c;其值为文件桶的下线。每个桶中至少要包含一个输入文档&#xff0c;也就是没有空桶。 使用 语法 {$bucket: {groupBy…...

从优化设计到智能制造:生成式AI在可持续性3D打印中的潜力和应用

可持续性是现代工业中一个紧迫的问题&#xff0c;包括 3D 打印领域。为了满足环保制造实践日益增长的需求&#xff0c;3D 打印已成为一种有前景的解决方案。然而&#xff0c;要使 3D 打印更具可持续性&#xff0c;还存在一些需要解决的挑战。生成式人工智能作为一股强大的力量&…...

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…...

【大厂算法面试冲刺班】day2:合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 递归 class Solution {public ListNode mergeTwoLists(ListNode l1, ListNode l2) {if (l1 null) {return l2;}else if (l2 null) {return l1;}else if (l1.val < l2.…...

【JaveWeb教程】(19) MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

目录 3. 数据库操作-DML3.1 增加(insert)3.2 修改(update)3.3 删除(delete)3.4 总结 3. 数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 添加数据&#xff08;INSERT&#xff09;修改数据…...

Web前端篇——ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部

ElementUI之el-scrollbar el-backtop el-timeline实现时间轴触底刷新和一键返回页面顶部。 背景&#xff1a;ElementUI的版本&#xff08;vue.global.js 3.2.36&#xff0c; index.css 2.4.4&#xff0c; index.full.js 2.4.4&#xff09; 废话不多说&#xff0c;先看动…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...