利用HTML5使文字转图片【长微博生成器】 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 23时,
& & &RT,实现类似现在网上流行的长微博生成器，就是把长文字转成图片。当然功能比不上网上流传的，不知道网上那些用的什么方法。我这是用的HTML5的Canvas特性，也算一种实现吧。
& & 示例地址：
，仅作大家交流使用。&
附加_日11:13:00：之前刚分享此代码的时候的版本是不能处理分行的，现在可以了。在做断行的过程，我发现：一个好算法，是胜过无数行苦逼的杂乱代码的...
代码片段(2)
1.&[图片] QQ截图48.jpg&&&&
2.&[代码][HTML]代码&&&&
&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").
var canvas = $('canvas');
if (txt == '') {
alert('请输入文字！');
$("txt").focus();
if (len & txt.length) {
len = txt.
canvas.width = fontSize *
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. 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.fillS
ctx.fillRect(0, 0, 100, 100);
//$('canvas').getContext('2d').fillStyle=$("showcolor").innerHTML;
&div style="float: left"&&textarea id="txt"
style="width: 450 height: 400"&如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！&/textarea&&/div&
&div style="width: 200 height: 100 float: clear: right"&
&td&&label&字体大小:&/label&&input size="4" id='fontSize' value='15' /&px&/td&
&td&&label&字体精细:&/label&&select id="fontWeight"&
&option value="normal"&正常&/option&
&option value="bold"&粗&/option&
&/select&&/td&
&td&&label&每行显示:&/label&&input size="4" id='len' value="40" /&个字&/td&
&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&
&button onclick=
textToImg();;
&生成图片&/button&
&canvas id="canvas" style="display:block"&&/canvas&
&div style="margin-left: 650px"&&img id="img"
style="border: 1px solid" /&&/div&
changeColor();
开源中国-程序员在线工具：
2楼：bobshi 发表于
引用来自“____′↘夏悸”的评论哦？原来你也有写过，好，去看看，学习一下，哈哈~
3楼：彭博 发表于
在线演示：
4楼：sdgfsdg 发表于
&IT职业交流& ，任意交流，欢迎加入！ 和谐交流，谢谢
5楼：凹凸口天 发表于
如何用js将html转换成图片哪？
6楼：被风遗忘 发表于
7楼：IMBA__Xiao8 发表于
开源从代码分享开始
bobshi的其它代码2018 年高薪帮内推：&&&+&&&htmlImage Project Url:
Introduction: 有时候我们需要加载一段 HTML 文本，文本中有标签图片，如商品详情。那么怎么才能更好的显示图片呢，当然是用 UIL 开源库了，那怎么使用呢。这就是本示例想要展示的 More: &&&&&&&&& Tags:
有时候我们需要加载一段 HTML 文本，文本中有标签图片，如商品详情。那么怎么才能更好的显示图片呢，当然是用 UIL 开源库了，那怎么使用呢。这就是本示例想要展示的
textView.setText(Html.fromHtml(text,imageGetter,tagHandler);来加载 html 文本，
imageGetter 需要返回 drawable 对象，那么可以重写 ImageGetter,即可。
URLImageGetter
public class URLImageGetter implements Html.ImageGetter{
private String shopDeS
private TextView textV
private DisplayImageO
public URLImageGetter(String shopDeString,Context context,TextView textView,DisplayImageOptions options) {
this.shopDeString = shopDeS
this.context =
this.textView = textV
this.options =
public Drawable getDrawable(String source) {
//解决 UIL 加载同一个 URL 图片时，导致下一个 task 被 cancel 掉的问题
final URLDrawable urlDrawable = new URLDrawable();
ImageSize imageSize = new ImageSize(480,320);
NonViewAware nonViewAware = new NonViewAware(imageSize, ViewScaleType.CROP);
ImageLoader.getInstance().displayImage(source,nonViewAware,options,new SimpleImageLoadingListener(){
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
super.onLoadingComplete(imageUri, view, loadedImage);
urlDrawable.bitmap = loadedI
urlDrawable.setBounds(0, 0, loadedImage.getWidth(), loadedImage.getHeight());
textView.invalidate();
textView.setText(textView.getText()); // 解决图文重叠
return urlD
loading Support MePaypal:
About MeGoogle+: GitHub: Blog:【HTML中怎么在图片的右边显示文字，不用表格】 - HTML/CSS当前位置:& &&&【HTML中怎么在图片的右边显示文字，不用表格】【HTML中怎么在图片的右边显示文字，不用表格】www.MyException.Cn&&网友分享于：&&浏览：88次【HTML中怎样在图片的右边显示文字，不用表格】------解决方案--------------------示例，其实就是布局的问题
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html&xmlns="http://www.w3.org/1999/xhtml"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&
&title&无标题文档&/title&
ul,p{margin:0;padding:0;}
li{list-style:}
.box{width:500margin:100px&}
.box&.img{float:}
.box&.img&img{width:100height:100}
.box&.list{float:width:200margin-left:20display:}
.box&.list&li{line-height:24font-size:14}
.list&li&span{font-weight:}
&div&class="box"&
&div&class="img"&
&&&& &img&src="http://img.baidu.com/img/image/3bf33a87e7ae485143fbf2b2.jpg"&alt=""&/&
&&&&&/div&
&&&&&ul&class="list"&
&&&& &li&&span&姓名:&/span&测试&/li&
&&&&&&&&&li&&span&性别:&/span&男&/li&
&&&&&&&&&li&&span&描述：&/span&&p&测试测试测试测试测试才愁死额&/p&&/li&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 使用样式隐藏图片作为背景图片上方的文字内容
此类问题我们常见于LOGO处使用，我们想让图片作为背景，而图片上方放文字内容，但功能仍然正常也能鼠标点击使用。
一、用到的CSS单词
根据以上描述，将使用样式单词如下：
以上CSS属性样式单词使用解释
我们使用是将图片设为显示；
使用text-indent缩进是隐藏a链接内容
使用&a&链接标签是对文字设置锚文本链接。
扩展阅读：
二、背景图片隐藏上方文字实际应用截图
CSS实现图片上文字隐藏实际使用截图
图片作为背景而html代码内看不到图片，但文字也存在，却是文字隐藏图片显示出，鼠标也能点击指向。
三、实际使用案例
接下来带领大家实现DIVCSS5网站LOGO布局（实现logo图片上文字内容隐藏同时超链接保留）。
实例案例描述
这里便于观察案例效果，我们就来实现DIVCSS5的网站LOGO布局。
LOGO图片地址：http://www.divcss5.com/img201301/divcss5-logo-2013.gif
扩展阅读：
h1#logo{&float:width:165height:60&background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)&no-repeat&0&0}&/*&：设置浮动，并设置和&&为了便于截图我们将CSS代码换行排版&*/&&h1#logo&a{display:width:100%;height:100%;text-indent:-9999px}&/*&css注释：:block是让#logo内成块显示，并以上级100%高度和100%宽度显示&此属性为样式，我们设置为负值的9999px，也就隐藏了a标签内文字&这样一来就显示了h1标签背景图片，隐藏了文字又实现了A锚文本超链接&*/&
&id=&logo&&&href=&http://www.divcss5.com/&&title=&DIVCSS5：DIV&CSS学习教程与资源分享平台&&DIV+CSS学习与资源分享平台&&&&&
3、案例效果
隐藏图片上文字实例截图
在浏览器显示结果，大家可跟着DIVCSS5给出实例代码思考并完成实践，在浏览器中测试测试。
重要解释：本来HTML里h1标签内设置了文字内容，但是设置&text-indent:-9999px&样式，实质是让文字向左平移9999px距离，自然在一般分辨率显示屏上无法看到9999px边缘内容，自然使用此CSS技巧实现了文字隐藏同时，背景图片显示正常。
在线演示：
四、DIVCSS5总结
我们让图片作为CSS背景、同时上面放上文字，又让文字隐藏，这个对于SEO来说比较实用。但实际操作时候注意图片大小高宽，在设置对象盒子时候注意高度宽度适合，并使用CSS background背景样式、text-indent、等样式单词实现。根据DIVCSS5案例多实例实践即可学会。如果不想用A锚文本隐藏图片上文字，可以将a标签换成、、均可效果相同。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 16:49
原创：本文www.divcss5.com DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT DIVCSS5.com 学习与资源分享平台html文字在图片右边_中华文本库
图片文字上下左右滚动代码_IT/计算机_专业资料。图片文字上下左右滚动代码 ...butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top...
Html环绕图片的文字_电脑基础知识_IT/计算机_专业资料。Html 环绕图片的文字一般的制作方法是: 1. 在一段文本的开头插入图片,然后选取图片并让它居左或者右, ...
HTML中Marquee属性详解用于文字、图片等的滚动效果_IT/计算机_专业资料。HTML中Marquee...[MARQUEE DIRECTION=&RIGHT& ]文字向右边滚动 [/MARQUEE] HEIGHT:用于设定滚...
滚动文字、图片等html代码详解_IT/计算机_专业资料。1.代码: &marquee scrollAmount...表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动...
把图片变成文字—图文转换工具方法 第一种方法:用 SnagIt 工具进行文字提取。 ...com/soft/2290.html ,汉化补丁可以在 http://www.skycn.com/soft/2291.html...
中华文本库_最权威的科学研究、教学教案、IT技术、小说文学、备考资料、办公文案和各行业相关资源等文本信息。
HTML+CSS+DIV网页设计与布局PowerPoint 97 格式第2章 网页文字和图片 - 第2章 网页文字和图片 ? 网页的文字是设计一个网页的基础,而网页图片则使网...
html css怎么样才能把文字放在图片的正下方 - html css怎 么样才能把文字放在图片的正下方 比较简单的做法就是,将他们放置一个盒子内,你想让文字跟图片居...}