html2canvas给图片添加水印,canvas 为图片添加水印

原理：在图片上面定义 canvas，固定的位置添加水印文字

源代码：

Title

var img = new Image();

//引入图片地址

img.src = "img/watermark.jpg"

img.onload = function () {

var canvas = document.getElementById('watermark');

//返回一个用于在画布上绘图的环境,当前唯一的合法值是2d，二维绘图

var context = canvas.getContext("2d");

/**画布上绘制图像、画布或视频，

* 参数——img：规定要使用的图像、画布或视频

* sx：可选。开始剪切的 x 坐标位置

* sy：可选。开始剪切的 y 坐标位置

swidth：可选。被剪切图像的宽度。

sheight：可选。被剪切图像的高度。

x：在画布上放置图像的 x 坐标位置。

y：在画布上放置图像的 y 坐标位置。

width：可选。要使用的图像的宽度(伸展或缩小图像)。

height：可选。要使用的图像的高度(伸展或缩小图像)。**/

context.drawImage(img, 0, 0);

context.font = "20px microsoft yahei";

context.fillStyle = "#ffffff";

context.fillText("biubiu", 450, 500);

}

效果图：

watermark.png

html2canvas给图片添加水印,canvas 为图片添加水印相关推荐

浅谈：canvas绘制图片，canvas转换图片灰度值。
主要使用的是canvas的属性,不懂的可以w3c了解一下使用方法,其中转化需要灰度计算公式,网上也有很多的方法,主要根据业务需求. 直接上代码,不明白的滴滴我 qq裙:182415907:@群主: 记 ...
canvas节点无法导出图片_uniapp canvas绘制图片后无法canvasToTempFilePath导出
后续补充:锅应该来自MIUI升级,因为我将之前打包的App安装后,依旧有这个问题(之前测试的时候是不存在的)... 但是但是,依旧请官方看看小米到底给你们挖了什么坑,解决此问题... 小米 webvi ...
神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下: http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没 ...
通过canvas给图片添加水印
在页面添加一个上传文件的input标签添加capture="camera"直接打开相机 <input id="file" type="file ...
小程序使用 canvas 给图片添加水印
小程序使用 canvas 给图片添加水印操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑-) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效 ...
利用canvas给图片添加水印
前言前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前 ...
使用canvas给图片添加水印
上接文章"图片处理" canvas元素其实就是一个画布,我们可以很方便地绘制一些文字.线条.图形等,它也可以将一个img标签里渲染的图片画在画布上. 我们在上传文件到后端的时候,使 ...
JS前端基于canvas给图片添加水印，并下载带有水印的图片
基于canvas给图片添加水印实现效果图图片添加水印的步骤 1.获取图片路径,将图片转换为canvas 2.canvas画布上绘制文字水印 3.水印绘制完成后,将canvas转换为图片格式 4.水 ...
前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
pdf怎样添加水印？添加图片水印的方法
PDF文件是我们常用的文件,而且具有不可编辑的优点,那么当我们需要往PDF文件当中添加水印的时候该怎么办呢?分享给大家pdf怎样添加水印,添加图片水印的方法 [PDF转换器] 首先我们准备PDF文件, ...

html2canvas给图片添加水印,canvas 为图片添加水印

html2canvas给图片添加水印,canvas 为图片添加水印相关推荐

最新文章

热门文章