canvas制作图片水印

概述

以前都是后端同学来处理的，现在有了canvas，
前端同学也可以做出水印来了，
而且要比后端同学做的要精美漂亮。

制作水印的几个步骤

在html中准备好canvas标签
将图片绘制到canvas元素上
向图片上添加水印

canvas标签

<canvas id="myCanvas" width="500" height="500">你的浏览器不支持canvas标签，请使用最新版的chrome浏览器
</canvas>

将图片绘制到`canvas`上

加载图片

// 通过ajax从后台获取，这里直接使用一个图片
var img = new Image();
img.src = './img/bg.jpg';

将图片绘制到canvas上

img.onload = function(){ //图片加载完成后var canvas = document.getElementById("myCanvas");// 获取canvas句柄（上下文）var ctx = canvas.getContext("2d");// 绘制图片ctx.drawImage(img,0,0);
}

向图片上添加水印

在onload函数中

// 绘制水印
ctx.font="20px Microsoft Yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);

参考文章
- canvas实现平铺水印

canvas应用
- 粒子效果

canvas制作图片水印相关推荐

Android使用Bitmap、Canvas制作图片
转载请注明来源:http://blog.csdn.net/kjunchen/article/details/51794037 Android使用Bitmap.Canvas制作图片先看下效果图: 在开 ...
使用canvas制作背景水印
记录使用canvas 制作文字背景水印 // 首先创建canvas标签并设置画布大小var watchCanvas = document.createElement('canvas'); // 创建 ...
【python 水印生成器】python制作图片水印
制作一个水印生成器,方便训练水印图片数据采集. 图片水印生成器,可以给指定图片文件或者目录添加水印,水印支持自定义文本.位置.颜色.大小. # -*- encoding=utf-8 -*- impor ...
canvas制作图片选区的效果（Vue）
大家好,我是南宫,今天来写一篇关于canvas绘制"图片选区"的博客. 最近我接到了一个新的任务,要求做一个新的弹窗,里面可以点击按钮,切换配置的能力.其中一个能力涉及到在图片上用 ...
记录一个制作图片水印的功能
功能介绍对图片生成图片水印或者文字水印 ,用户可以自定义自己的图片水印思路就是将文字和图片水印合成到一张图片上面去,前台展示合成效果后台合成后保存到cos上面,并在数据库保存相关信息,方便用户下 ...
ps从零开始之制作图片水印制作网站水印
原文地址:http://xiqingchun.com/forum.php? ... 1&extra=#pid297 我们经常需要给喜爱的图片加上具有自己特色的水印标志,以对这个图片宣誓我们对这 ...
python给图片添加水印图片_使用Python编写批量添加图片水印程序
文章目录一.为什么要为图片添加水印二.利用Python为图片添加水印遍历文件夹下所有图片文件三.利用QT for Python制作图片水印添加程序一.为什么要为图片添加水印在互联网写文章最 ...
python图片水印软件_使用Python编写批量添加图片水印程序：一、代码方案
一.为什么要为图片添加水印在互联网写文章最头疼的一件事情就是发表的文章容易被抄袭,各种抄袭的手段真的是层出不穷.无奈,只能在不影响阅读体验的情况下不断地提高反抄袭的难度.虽然防不住,但是为文章中的图 ...
word图文设计：如何用图片水印功能制作日历画册
新的一年马上来临了,许多人都会换上新的日历.通常大家都是去外面购买,买来的日历总是千篇一律,没有特色.为何不自己新自己动手制作一本专属于自己的个性日历呢?做好后,自己使用或作为礼物送给亲朋好友都很不错 ...

canvas制作图片水印

概述

制作水印的几个步骤

canvas标签

将图片绘制到`canvas`上

向图片上添加水印

canvas制作图片水印相关推荐

最新文章

热门文章

canvas制作图片水印

概述

制作水印的几个步骤

canvas标签

将图片绘制到canvas上

向图片上添加水印

canvas制作图片水印相关推荐

最新文章

热门文章

将图片绘制到`canvas`上