<!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. Spring的datasource配置详解【转】

    一句话,Spring对Hibernate的整合,是在applicationContext.xml中配置sessionFactory来实现的,其中sessionFactory中要装配dataSource ...

  2. JZOJ 5197. 【NOIP2017提高组模拟7.3】C

    5197. [NOIP2017提高组模拟7.3]C Time Limits: 1000 ms  Memory Limits: 262144 KB  Detailed Limits   Goto Pro ...

  3. wireshark_1.6.2 使用笔记

    表示ip1是否有访问ip2,进行抓包

  4. Python9-MySQL索引-外键-day43

    1.以ATM引出DBMS2.MySQL -服务端 -客户端3.通信交流 -授权 -SQL语句 -数据库 create database db1 default charset=utf8; drop d ...

  5. scrapy框架简介和基础使用

    概念 为了爬取网站数据而编写的一款应用框架,出名,强大.所谓的框架其实就是一个集成了相应的功能且具有很强通用性的项目模板.(高性能的异步下载,解析,持久化……) 安装 linux mac os:pip ...

  6. 2016-2017 ACM-ICPC CHINA-Final

    A Gym 101194A Number Theory Problem 7 的二进制是111,2k-1 的二进制是 k 个 1.所以 k 能被 3 整除时 2k-1 才能被 7 整除. #includ ...

  7. 03013_动态页面技术-JSP

    1.jsp的出现 2.jsp脚本和注释 (1)jsp脚本 ①<%java代码%> ----- 内部的java代码翻译到service方法的内部: ②<%=java变量或表达式> ...

  8. MySQL基础6-分组查询

    1.分组函数 需求20:查询所有商品平均零售价SELECT AVG(salePrice) FROM product 需求21:查询商品总记录数SELECT COUNT(id) count FROM p ...

  9. python2.X中文乱码

    在IDE下,加上# -- coding: UTF-8 -- 并且保证IDE也是utf-8编码. 在CMD下,这样执行会有乱码,为啥呢,因为cmd下是gbk编码的,你写的代码必须也是gbk编码的,你可以 ...

  10. Python中@property和@classmethod和@staticmethod

    前戏 首先,先要弄清楚一个类里面的,各个组成部分都应该怎么称呼. - 注:可能叫法会不太一样. 关于@property 顾名思义:它的意思为‘属性’. 作用: 1:使用它你将会把类方法,变为类属性.并 ...