<!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. 十八、MySQL 排序

    MySQL 排序 我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据. 如果我们需要对读取的数据进行排序,我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段 ...

  2. 将Web项目War包部署到Tomcat服务器基本步骤（完整版）

    1. 常识:   1.1 War包 War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码. 当开发人员在自己 ...

  3. A1075 PAT Judge (25)（25 分）

    A1075 PAT Judge (25)(25 分) The ranklist of PAT is generated from the status list, which shows the sc ...

  4. UVA 1594 Ducci Sequence（紫书习题5-2 简单模拟题）

    A Ducci sequence is a sequence of n-tuples of integers. Given an n-tuple of integers (a1, a2, · · · ...

  5. qt4.8.5 qtwebkit 静态编译 版本

    2013年就编译好了,qtwebkit是最不好编译的了,尤其是静态编译,这儿分享给大家 估计总有人会用得到... 静态库下载地址:http://yunpan.cn/cyyNqrApbVDwq  提取码 ...

  6. pycharm中某些方法被标黄的原因及解决办法

    在编辑python文件时,会遇到上图所示,函数方法被标黄的问题,但是不影响使用. 引起原因:,如果不报错说明,这是因为你配置的python解释器中有该方法,但是pycharm没有找到这个方法,即加载失 ...

  7. 【Rotate Image】cpp

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...

  8. Github新手使用学习详解

    Github新手使用学习详解 (一)git的使用学习 首先下载git bash,安装一路默认选择即可. 安装好后第一步,获取ssh key,即属于自己的密钥: 打开Git bash后输入以下代码: $ ...

  9. PAT——乙级1018

    题目是 1018 锤子剪刀布 (20 point(s)) 大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出 ...

  10. Linux 必要软件的安装与配置

    主要是记录一下,免得下次重装系统后又到处搜索.. 一.必要软件的安装 JDK 下载 tar.gz:http://www.oracle.com/technetwork/java/javase/downl ...