使用canvas给图片加水印

最新推荐文章于 2023-02-24 09:41:10 发布
最新推荐文章于 2023-02-24 09:41:10 发布
阅读量1k 收藏
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suraelax/article/details/115396645
版权

获取本地图片

效果图

在这里插入图片描述
在这里插入图片描述

定义一个input用来选择文件，定义一个img标签用来显示选择的文件

<input
        type="file"
        accept="image/png, image/jpeg"
        id="file"
        @change="handleImgUpload"
      />
<img src="" alt="" id="originImg" />

js用来处理选择文件后如何如何显示图片

//i
最低0.47元/天 解锁文章
abigmiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Bpmn.js在vue里制作查看流程图组件
芸灵fly的博客
03-31 5829
说明 啊 好久不见，最近出差了很久，那久没写博客，来冒泡（填坑）啦~最近需要使用Bpmn.js制作流程的前端，技术上选的是vue，前几篇里我们一直讲的都是后端通用流程的实现，现在来讲一下前端吧（其实我是搞后端的ヽ(ー_ー)ノ有不对的地方欢迎指点）。 快速开始 默认项目已经引入bpmn-js等相关组件，我这里弹窗和按钮用的都是antdesign组件，你可以任意替换你喜欢的弹窗和按钮组件，直接上...
前端通过 canvas 实现给图片打水印
最新发布
weixin_46087056的博客
04-18 500
前端通过 canvas 实现给图片打水印
vue3弹框使用【bpmn.js 使用总结】预览流程图
qq_42103673的博客
09-15 2499
【代码】vue3弹框使用【bpmn.js 使用总结】预览流程图。
基于canvas画布的实用类Fabric.js的使用Part.2
qq_40007317的博客
02-24 1177
一、分组（Groups） Groups是Fabric最强大的功能之一，它可以将任意数量的Fabric对象组合在一起，形成一个小组，分组后，所有对象都可以一起移动、修改、缩放、旋转甚至更改其外观等
canvas 实现图片添加水印
FrankJiang
12-10 2156
1.使用canvas来实现图片添加水印（也包括上传图片后显示水印~） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.
Android 拍照或者从相册获取图片,加上水印并保存到本地(带效果图)
奇奇怪怪的Android code的博客
04-12 2929
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 本篇博客主要讲述拍照和从相册获取到图片,加上水印的效果,并保存到手机本地,Android 11以下 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便
shuiyin.zip_canvas 图片加水印
09-20
在本案例中，我们探讨的是如何使用HTML5的Canvas API来实现图片加水印的功能。Canvas是HTML5提供的一种强大的绘图工具，允许开发者在网页上动态绘制图形、文字，甚至处理图像。 首先，我们需要了解Canvas的基本用法...
html2canvas 网页对图片加水印
03-06
4. **调用HTML2Canvas**：使用HTML2Canvas API将包含水印的整个页面或特定元素渲染到Canvas上。然后，你可以将Canvas转换为图片。例如： ```javascript html2canvas(document.getElementById('watermark-image'), ...
小程序用Canvas给图片加水印，拼接图片，制作名片
03-29
下面我就将介绍一下怎么给图片添加水印，图片的拼接，怎么制作个性名片以及制作一个涂鸦的画板。   水印 水印的添加总的来说可以简单的分为三步来走，第一步先完成一个画布的创建，第二步在画板上画出你想添加水印...
JS前端基于canvas给图片添加水印
01-18
前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片...
CanvasJS v2.2 消除水印Trial Version
01-02
CanvasJS v2.2 消除水印Trial Version，无须修改许多源代码，只要注解一列代码即可消除 Trial Version + CanvasJS.com，canvasjs.min.js、jquery.canvasjs.min.js都须修改的。
html5 canvas实现给图片添加平铺水印
12-14
最近项目中遇到一个需求，需要把一张图片加上平铺的水印 类似这样的效果   首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺nice的...
使用Java在图片中添加文字
u012198023的博客
10-17 4380
有这样一张图片，需要修改图中的时间 实现思路： 先使用绘图工具将上图中的时间抹成白色。将图片加载到BufferedImage类，使用Graphics2D类对图片进行文字绘制，最后输出流，前端通过a标签访问即可完成下载。在我的电脑中，Arial字体样式和图片中的时间的字体样式一致，将项目部署到linux中后由于系统中没有该字体，需要先向linux中安装字体，安装方式见： https://blog.csdn.net/wangxintong_1992/article/details/81194896 以下代
java 采用腾讯云直播实现多方视频录制并每路画面添加相应的水印
qq_39552993的博客
06-02 1537
这是我第一篇文章，本人也是菜鸟，如果有什么不对，也请大神多多指点 话不多说，进入正题。 首先录制视频的前提是推流和拉流同时是连接上才能进行录制工作。否则腾讯云不会给你返回录制的视频地址。 如果你不知道拉流和推流是什么，可以参考腾讯云的api https://cloud.tencent.com/document/product/267/13551 说到水印就需要有一个生成水印的方法，我的水印是根据字...
使用canvas给页面添加文字水印
summer的博客
06-02 599
参考：vue页面添加水印 - 简书代码：根据我们的需求我做了一点修改
前端学习--Vue+H5开发APP踩坑
weixin_38009285的博客
03-11 1295
1、长按按钮N秒后触发函数 实现步骤： （1）手指按在按钮范围时开始一个定时器，设置两个变量，其中一个记录按下的时间，每过一秒就加1，另一个记录手指是否有移动过 （2）手指按下后，如果手指有移动则清除定时器，变量设置为0 （3）手指抬起，清除定时器，判断变量值与N是否相等 <button id='actionState'>长按N秒后触发函数</button> //全局变量...
springboot集成Camunda，加前端bpmn页面流程编辑器
Yang_RR的博客
02-21 7830
一般Camunda会自动初始化mysql生成act_开头的49张表，如需手动初始化sql，可去官网找到对应版本（此例中Camunda版本为7.18.0）的sql脚本文件，然后如上启动流程的时候给流程变量flag初始化和赋值，后续提交任务的时候，也可随时通过修改流程变量的值来控制流程分支的走向。其中：”可执行文件“，这个选项需要勾选上，不然流程部署后，3.b.启动流程实例步骤获取不到definitionId。其中流程变量deptMajor，在启动流程时候，需要定义数据类型（值可以先不定义）
Canvas实现添加水印
看陌生的风景的博客
07-23 658
function addWaterMarker(str) { var can = document.createElement('canvas'); var body = document.body; body.appendChild(can); can.width = 300; can.height = 3...
flutter怎么给图片加水印
05-16
Flutter中给图片加水印的步骤如下： 1. 将图片加载到内存中，可以使用`ImageProvider`或`File`类来加载。 2. 创建一个新的画布，并将原始图片绘制到画布上。 3. 在画布上绘制水印，可以使用`TextPainter`类来绘制文字水印，或使用`ImageProvider`类来加载图片水印。 4. 将绘制完水印的画布保存为新的图片文件。 下面是一个简单的示例代码： ```dart import 'dart:async'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:path_provider/path_provider.dart'; import 'package:image/image.dart' as img; class WatermarkImage extends StatefulWidget { final String imagePath; final String watermarkText; WatermarkImage({required this.imagePath, required this.watermarkText}); @override _WatermarkImageState createState() => _WatermarkImageState(); } class _WatermarkImageState extends State<WatermarkImage> { late String _watermarkImagePath; @override void initState() { super.initState(); _addWatermarkToImage(); } Future<void> _addWatermarkToImage() async { final directory = await getTemporaryDirectory(); final imageFile = File(widget.imagePath); final image = img.decodeImage(imageFile.readAsBytesSync())!; final watermark = img.Image.fromBytes( 100, 50, img.encodePng(img.copyResize( img.decodeImage( (await rootBundle.load('assets/images/watermark.png')).buffer.asUint8List(), )!, width: 100, height: 50, )), ); final textPainter = TextPainter( text: TextSpan( text: widget.watermarkText, style: TextStyle( fontSize: 20, color: Colors.white, ), ), textDirection: TextDirection.ltr, )..layout(); final canvas = img.Canvas(image); canvas.drawImage(watermark, 0, 0); canvas.drawImage( img.copyResize( img.Image.fromBytes( textPainter.width.toInt(), textPainter.height.toInt(), img.encodePng( (await textPainter.toPicture().toImage(textPainter.width.toInt(), textPainter.height.toInt())) .toByteData(format: img.PixelFormat.rgba8888)! .buffer .asUint8List(), ), ), width: 100, height: 50, ), image.width - 100, image.height - 50, ); final watermarkImageFile = File('${directory.path}/watermark_${DateTime.now().millisecondsSinceEpoch}.jpg'); watermarkImageFile.writeAsBytesSync(img.encodeJpg(image)); setState(() { _watermarkImagePath = watermarkImageFile.path; }); } @override Widget build(BuildContext context) { return _watermarkImagePath != null ? Image.file( File(_watermarkImagePath), fit: BoxFit.cover, ) : Container(); } } ``` 这个示例代码将加载指定路径的图片文件，并在右下角添加一个水印图标和文字水印。最终生成的带有水印的新图片文件将保存在应用程序的临时目录中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值