<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<canvas id='myCanvas' ></canvas>
<div id="imgCon" style="background: red"></div>
<script type="text/javascript">

getImg('济南店',8);
function getImg(text,fsz){
var img = new Image();
img.src = './timg.png';
img.onload=function(){//图片加载完成，才可处理
var c = document.getElementById("myCanvas");
c.width=img.width;
c.height=img.height;
var cxt = c.getContext("2d");
cxt.fillStyle = "rgba(255, 255, 255, 0)";
cxt.fillRect(0, 0, c.width, c.height);
cxt.drawImage(img,0,0);
cxt.save();
cxt.font = fsz+"px Arial";
cxt.textBaseline = 'middle';//更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
cxt.textAlign = 'center';
var tw = cxt.measureText(text).width;
var ftop = c.height/2-5;
var fleft = c.width/2;
//cxt.fillStyle="#ff0000";
//cxt.fillRect(fleft-tw/2,ftop-fsz/2,tw,fsz);//矩形在画布居中方式
//cxt.fillStyle="#ffffff";
cxt.fillText(text,fleft,ftop);//文本元素在画布居中方式
cxt.strokeStyle = 'white';
cxt.strokeText(text,fleft,ftop);//文字边框

var ii=(new Image())
ii.src=c.toDataURL('image/jpeg')
document.getElementById("imgCon").appendChild(ii)

};

}

/*getBase64('./timg1.png')
function getBase64(url){
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
var Img = new Image(),
dataURL='';
Img.src=url;

Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width=Img.width, //确保canvas的尺寸和图片一样
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中

dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
console.log(dataURL)
};
}*/

</script></body></html>

为图片添加文字 canvas的更多相关文章

  1. ios图片添加文字或者水印

    在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...

  2. php 图片添加文字水印 以及 图片合成(微信快码传播)

    1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...

  3. R语言 如何为图片添加文字说明（转载）

    转载:(中文翻译者)[http://blog.csdn.net/chen790646223/article/details/49766659] (原文链接)[http://datascienceplu ...

  4. 利用php给图片添加文字水印--面向对象与面向过程俩种方法的实现

    1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image ...

  5. 一种基于重载的高效c#上图片添加文字图形图片的方法

    在做图片监控显示的时候,需要在图片上添加文字,如果用graphics类绘制图片上的字体,实现图像上添加自定义标记,这种方法经验证是可行的,并且在visual c#2005 编程技巧大全上有提到,但是, ...

  6. Swift - 给图片添加文字水印（图片上写文字，并可设置位置和样式）

    想要给图片添加文字水印或者注释,我们需要实现在UIImage上写字的功能. 1,效果图如下: (在图片左上角和右下角都添加了文字.) 2,为方便使用,我们通过扩展UIImage类来实现添加水印功能 ( ...

  7. C# 使用 GDI+ 给图片添加文字，并使文字自适应矩形区域

    需求 需求是要做一个编辑文字的页面.用户在网页端写文字,文字区域是个矩形框,用户可以通过下方的拖动条调节文字大小. 如下图: 提交数据的时候前端传文字区域的左上角和右下角定位给后台.因为前端的字体大小 ...

  8. C#图片添加文字水印

    /// <summary> /// 给图片添加文字水印 /// </summary> /// <param name="img">图片</ ...

  9. php图片添加文字水印方法汇总

    方法一: <?php header("content-type:text/html;charset=utf-8"); //指定图片路径 $src = "img/a. ...

随机推荐

  1. Linux入门-第九周

    1.判断UID是否大于等于500,如果为真就显示为普通用户,如果为假就显示为系统或管理用户 AWK简介:awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报 ...

  2. mysql安装记录

    一.创建mysql用户 useradd mysql 二.解压 tar -zxvf mysql-5.6.38.tar.gz 三.安装依赖包 yum install -y ncurses-devel li ...

  3. Window_Bat_Scripts—检测特定网段未使用的IP地址

    1.1    脚本名称 Check_IP_Not_Use.bat 1.2    脚本代码 @Echo off set /p input_number=请输入网络位(192.168.1.): IF EX ...

  4. SQL Server中的日期，时间组合查询

    如图所示,Jdate和Jdate2是两个分开的字段,一个是date类型,存储日期,一个是time(0)类型,存储具体时间 现在有这样的要求,就是获得(Jdate和Jdate2组合起来的日期时间)在(当 ...

  5. [Poj1273]Drainage Ditches（网络流）

    Description 给图,求最大流 最大流模板题,这里用dinic Code #include <cstdio> #include <cstring> #include & ...

  6. 笔记-算法-hash以及hashlib使用

    算法-hash和hash表以及hashlib使用 1.      简介 1.1.    hash Hash(散列/哈希),就是把任意长度的输入(预映射pre-image)通过散列算法变换成固定长度的输 ...

  7. Java面向对象---类

    类的定义 class 类名称{ 变量: 方法: } 声明一个类需要一个关键字:class 类的命名规则:组成类名称的所有单词首字母都必须大写.如UserDao

  8. Google Authenticator(谷歌身份验证器)C#版

    摘要:Google Authenticator(谷歌身份验证器),是谷歌公司推出的一款动态令牌工具,解决账户使用时遭到的一些不安全的操作进行的"二次验证",认证器基于RFC文档中的 ...

  9. 静态文本框控件的美化CStatic

    VC通用控件都是灰色,当对程序界面进行美化时,使用通用控件就和美化后的程序界面不搭配,在VB,C#中,可以很方便的更改控件背景颜色,但在VC中就不能,需要我们自己来完善这方面的功能.我在这只简单的介绍 ...

  10. BugKu-图穷匕见

    拿到图片后,先放到winhex,看看文件头是不是和jpg匹配,看看文件尾,不是FFD9 ,说明后边肯定是藏了什么东西. 顺便找一下文件尾有没有flag(估计是签到题目才会这样吧). binwalk跑一 ...