HTml js 生成图片
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function textToImg() {
var len = $('len').value || 30;
var i = 0;
var fontSize = $('fontSize').value || 15;
var fontWeight = $('fontWeight').value || 'normal';
var txt = $("txt").value;
var canvas = $('canvas');
if (txt == '') {
alert('请输入文字!');
$("txt").focus();
}
if (len > txt.length) {
len = txt.length;
}
canvas.width = fontSize * len;
canvas.height = fontSize * (3 / 2)
* (Math.ceil(txt.length / len) + txt.split('\n').length - 1);
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = $("showcolor").innerHTML;
context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
context.textBaseline = 'top';
canvas.style.display = 'none';
console.log(txt.length);
function fillTxt(text) {
while (text.length > len) {
var txtLine = text.substring(0, len);
text = text.substring(len);
context.fillText(txtLine, 0, fontSize * (3 / 2) * i++,
canvas.width);
}
context.fillText(text, 0, fontSize * (3 / 2) * i, canvas.width);
}
var txtArray = txt.split('\n');
for ( var j = 0; j < txtArray.length; j++) { fillTxt(txtArray[j]); context.fillText('\n', 0, fontSize * (3 / 2) * i++, canvas.width); } var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var img = $("img"); img.src = canvas.toDataURL("image/png"); } function changeColor() { var c = $("text"); var ctx = c.getContext("2d"); var red = $("red"); var green = $("green"); var blue = $("blue"); ctx.fillStyle = "rgb(" + red.value + "," + green.value + "," + blue.value + ")"; $("showcolor").innerHTML = ctx.fillStyle; ctx.fillRect(0, 0, 100, 100); //$('canvas').getContext('2d').fillStyle=$("showcolor").innerHTML; } </script>
<div>
<textarea id="txt" style="width:450px;height:400px;">如果您的长微博字数超过了140个字的限制,在这里输入微博内容,点击右方的“生成图片”,鼠标右击右边“文字”,“图片另存为...”,保存图片后,就可以直接发到微博里了,赶紧试试吧! </textarea>
</div>
<div style="width:200px;height:100px;float:left;clear:right;">
<table>
<tbody>
<tr>
<td>
<label>字体大小:</label><input size="4" id="fontSize" value="15" />px
</td>
</tr>
<tr>
<td>
<label>字体精细:</label><select id="fontWeight"> <option value="normal">正常</option>
<option value="bold">粗</option>
</select>
</td>
</tr>
<tr>
<td>
<label>每行显示:</label><input size="4" id="len" value="40" />个字
</td>
</tr>
<tr>
<td>
<canvas id="text" width="100" height="100"></canvas>
<p>
Red: <input type="range" id="red" min="0" max="255" value="0" onchange="changeColor();" />
</p>
<p>
Green:<input type="range" id="green" min="0" max="255" value="0" onchange="changeColor();" />
</p>
<p>
Blue: <input type="range" id="blue" min="0" max="255" value="0" onchange="changeColor();" />
</p>
目前的颜色:<span id="showcolor"></span>
</td>
</tr>
<tr>
<td>
<button onclick="textToImg();;">生成图片</button>
</td>
</tr>
</tbody>
</table>
</div>
<canvas id="canvas" style="display:block;"></canvas>
<div>
<img id="img" style="border:1px solid;" />
</div>
<script>
changeColor();
</script>
HTml js 生成图片的更多相关文章
- 调用 js 生成图片二维码
一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...
- js生成图片
var image = new Image(); var c = document.getElementById("myCanvas"); var ctx = c.getConte ...
- Sticker.js生成图片或者页面元素“速干贴”效果
在线演示 本地下载 真实的效果,真的非常好玩!
- 关于html2canvas跨域设置
最近在做js生成图片的功能,因为有的商户logo图片在阿里云oss存储的,所以遇到了跨域的问题.跨域的话可以在服务器端设置header, 跨域的话目前的解决方案是服务端设置,Access-Contro ...
- java-pdf转word
注:原文来至 < java-pdf转word > 一: java Pdf 文字 转 Word 废话不说,直接上图 很简单的用法:1.new个PDFBox对象2.调用pdfToDoc() ...
- BuaaRedSun团队博客目录——北航社团项目
目录 一.Scrum Meeting 1. Alpha 2. Beta 3. Gamma 二.测试报告 三.发布说明 四.技术博客 后端 前端 五.习得的软工原理/方法/技能? Alpha Beta ...
- Beta/Gamma事后分析
目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结 对照敏捷开发的原则, 你觉得你们小组做得最好的是哪几个原则? 请列出具体的事例. 照片 设想和目标 我们的 ...
- 【Gamma】“北航社团帮”展示博客
目录 团队介绍 项目愿景 整个项目的预期典型用户 功能展示 原预期用户数量 项目使用情况数据分析 用户量变化 学生认证人数 社长认证人数 入社申请数 活动发布 新闻发布 网页端使用情况 小程序打开次数 ...
- 移动端js模拟截屏生成图片并下载功能的实现方案
一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...
随机推荐
- IDEA小技巧-随时更新
© 版权声明:本文为博主原创文章,转载请注明出处 1.设置删除一行快捷键 File->Settings->keymap->Delete Line 2.设置代码提示快捷键 File-& ...
- Netty(五):Netty中如何序列化数据
JDK提供了ObjectOutputStream和ObjectInputStream,用于通过网络对POJO的基本数据类型和图进行序列化和反序列化.该API并不复杂,而且可以被应用于任何实现了java ...
- POJ 2985 Treap平衡树(求第k大的元素)
这题也能够用树状数组做,并且树状数组姿势更加优美.代码更加少,只是这个Treap树就是求第K大元素的专家--所以速度比較快. 这个也是从那本红书上拿的模板--自己找了资料百度了好久,才理解这个Trea ...
- 一个用消息队列 的人,不知道为啥用 MQ,这就有点尴尬
消息队列 为什么写这篇文章? 博主有两位朋友分别是小A和小B: 小A,工作于传统软件行业(某社保局的软件外包公司),每天工作内容就是和产品聊聊需求,改改业务逻辑.再不然就是和运营聊聊天,写几个SQL, ...
- Android异步处理二:使用AsyncTask异步更新UI界面
在<Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面>中,我们使用Thread+Handler的方式实现了异步更新UI界面,这一篇中,我们介绍一种更为简 ...
- 常用sql集锦
1.从数据库A中把表tableA导入到数据库B中 --如果主键是自增,则必须列出具体字段.-- select * into tableA from A..tableA 2.批量更改表中某列中的某个字符 ...
- Eclipse + JDK + tomcat开发环境配置
第一步:下载jdk和tomcat:JDK下载 Tomcat下载 最新的jdk为1.6.10,tomcat为6.0,建议jdk1.4以上,tomcat4.0以上 第二步:安装和配置 ...
- 使用IntelliJ IDEA 15和Maven创建Java Web项目(转)
1. Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和简单,所以这里也强调下,尽量使用此类工具进行项目构建, 它可以管理项目的整个生命周期. 可以通过其命令做所有相关的工 ...
- 我的Android进阶之旅------>Android中MediaButtonReceiver广播监听器的机制分析
今天看公司的一段关于MediaButtonReceiver的代码看的比较混乱,幸好看了下面的这篇文章,才能茅塞顿开的理解好代码.在此转载下来,以备以后理解,希望都到这篇文章的人也能够有所帮助. 本文转 ...
- 流畅的python学习笔记:第十三章:重载运算符__add__,__iadd__,__radd__,__mul__,__rmul__,__neg__,__eq__,__invert__,__pos__
在前面第十章以及第一章的时候介绍了Vector对象的运算符重载.第十三章专门介绍运算符重载.这里我们看几个之前没讲过的运算符__neg__,__pos__,__invert__ class Vecto ...