市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧

html:

<canvas id="shuiyinTest">

</canvas>

<div>

<input id="shuiyinText" value="" type="text"/>

<button id="shuiyinBtn" class="mui-btn mui-btn-primary" type="button"> 点击添加水印</button>

</div>

画完页面就是这个样子了:

加上js处理:

/*加水印*/

function shuiyin(canvasid,imgurl,addtext){

var img = new Image ;

img.src = imgurl;

img.onload = function(){

var canvas = document.getElementById(canvasid);

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

ctx.drawImage(img,0,0);

ctx.font = "14px 微软雅黑";

ctx.fillStyle = "rgba(252,255,255,0.8)";

document.getElementById("shuiyinBtn").onclick = function(){

var addtext = document.getElementById("shuiyinText").value;

ctx.fillText(addtext,10,50); //选择位置

}

}

}

shuiyin("shuiyinTest","../img/member_270x210.jpg")

下面就是见证奇迹的时刻了

而且我们还可以保存到本地哦!

前端小程序——js+canvas 给图片添加水印的更多相关文章

  1. 微信小程序使用canvas绘制图片的注意事项

    1.单位换算问题,canvas的尺寸单位是px,所以单位需要做个换算,可以通过wx.getSystemInfo获取屏幕宽高(单位是px),微信小程序无论什么机型,屏幕宽度都是750rpx,因此可以做个 ...

  2. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  3. 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  4. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  5. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  7. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  8. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  9. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

随机推荐

  1. 运行时数据区--程序计数器(PC Register)

    程序计数器(PC Register) 这里的计数器(Program Counter Register)并非为广义上所指的物理寄存器,JVM中的PC寄存器(程序计数器)是对物理PC寄存器的一种抽象模拟, ...

  2. 并发编程(八)Lock锁

    一.引言 线程并发的过程中,肯定会设计到一个变量共享的概念,那么我们在多线程运行过程中,怎么保证每个先拿获取的变量信息都是最新且有序的呢?这一篇我们来专门学习一下Lock锁. 我们先来了解几个概念: ...

  3. 面试官:分库分表之后,id 主键如何处理?

    面试题 分库分表之后,id 主键如何处理? 面试官心理分析 其实这是分库分表之后你必然要面对的一个问题,就是 id 咋生成?因为要是分成多个表之后,每个表都是从 1 开始累加,那肯定不对啊,需要一个全 ...

  4. Spring的三大核心接口——BeanFactory、ApplicationContext、WebApplicationContext

    之前也在用这三个接口,但是对于他们的概念还是处于朦胧状态,同时,也不知道他们之间是一个什么关系,趁着现在有点时间总结一下吧,也需要对你有所帮助.一.BeanFactory       基本认识:    ...

  5. SolrJ使用

    1 //向solr索引库中添加索引 2 public void addDoc() throws Exception { 3 //创建solr客户端的对象 4 HttpSolrClient client ...

  6. Java学习day03

    day03 课堂笔记 1.数据类型 2.总结第二章到目前为止所学内容: * 标识符 * 关键字 * 字面值 * 变量 成员变量如果没有赋值,系统会自动赋值,而局部变量不手动赋值,则会编译不通过. * ...

  7. 01 学习人工智能,不做笔记?做笔记不知道如何输入数学公式?“onenote+Mathematics Add-In”拯救你!onenote安装数学输入公式插件Microsoft Mathematics Add-In for Word and OneNote教程走一波

    一.Microsoft Mathematics Add-In 插件下载 Microsoft Mathematics Add-In for Word and OneNote插件下载链接: https:/ ...

  8. 【代码审计】PHP代码审计---基础记录

    PHP伪协议 PHP伪协议事实上是其支持的协议与封装协议,支持的种类有以下12种. * file:// - 访问本地文件系统 * http:// - 访问 HTTP(s) 网址 * ftp:// - ...

  9. C1853 编译器错误:fatal error C1853: 'pjtname.pch' precompiled header file is from a previous

    转载:https://www.cnblogs.com/emanlee/archive/2010/10/16/1852998.html 用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件 ...

  10. P3431 [POI2005]AUT-The Bus

    Link 简化题意: 给你一张网格图,每个点有其对应的权值,让你找出来一条横纵坐标都单调不降的路径,并最大化经过点的权值. 分析: 这是经典的二维数点或者二维偏序问题. 如果两维一直在变的话,我们不是 ...