<!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. HDU4616 树形DP+三次深搜

    这题和之前那个HDU2616有着奇妙的异曲同工之处..都是要求某个点能够到达的最大权重的地方... 但是,这题加了个限制,要求最多只能够踩到C个陷阱,一单无路可走或者命用光了,就地开始清算总共得分之和 ...

  2. SharedPreferences使用(通过键值保存数据)

    保存数据到SharedPreferences中 要想使用SharedPreferences来存储数据, 首先需要获取到SharedPreferences对象. Android中主要提供了三种方法用于得 ...

  3. MySQL基础3-SQL语言

    1.DQL语句分类 重点在于Select语句 2.Sql语句的书写规则 3.怎样使用Navicat导入已经写好的sql文件 (1)在Navicat中右击选中的数据库 (2)将sql文件所在的路径添加进 ...

  4. [网站公告]11月26日00:00-04:00阿里云RDS升级

    大家好,11月26号00:00-04:00(今天夜里),阿里云将对我们所用的SQL Server RDS实例所在的物理主机做升级操作(目前博客园整站运行于阿里云上),升级期间RDS实例会有2次闪断,每 ...

  5. RSA进阶之共模攻击

    适用场景: 同一个n,对相同的m进行了加密,e取值不一样. e1和e2互质,gcd(e1,e2)=1 如果满足上述条件,那么就可以在不分解n的情况下求解m 原理 复杂的东西简单说: 如果gcd(e1, ...

  6. python学习-- django 2.1.7 ajax 请求 进阶版

    #原来版本 $.get("/add/",{'a':a,'b':b}, function(ret){ $('#result').html(ret)}) #进阶版  $.get(&qu ...

  7. Leetcode 543.二叉树的直径

    二叉树的直径 给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点. 示例 :给定二叉树 1 / \ 2 3 / \ 4 5 返回 3, ...

  8. PAT——乙级1016

    乙级PAT的1016 乙级的题相对比较简单,我也是主要联系写代码的格式,而不是联系算法. 1016 部分A+B (15 point(s)) 正整数 A 的“D​A​​(为 1 位整数)部分”定义为由  ...

  9. DNS 劫持、HTTP 劫持与 DNS 污染

    本文为本人的学习笔记,不保证正确. DNS 劫持 指DNS服务器被控制,查询DNS时,服务器直接返回给你它想让你看的信息.这种问题常为 ISP 所为. 由于一般的的电脑的 DNS 服务器 的配置都为自 ...

  10. [oldboy-django][4python面试]有关yield那些事

    1 yield 在使用send, next时候的区别(举例m = yield 5) 无论send,next首先理解m = yield 5 是将表达式"yield 5 "的结果返回给 ...