引
网站改版后,需要重新设计详情长图,我需要以前老图的一些文案信息,就找后台人员要以前老图的地址,后台给我整理后给我了一些 txt 文本,里面是一大段代码,而且因为都是一些长图,图片都是切成好多块的小图拼在一起的,从数据库拿出来的字符串是好多 img 标签连在一起的。
我需要把所有小图复制到 ps 里合并成长图后,再参考上面的文字信息,重新设计长图。
想法
一开始,我是把后缀名改成 .html
,直接在浏览器渲染,但是直接渲染出来,并不理想。
图片出来有时候会乱掉,还需要进去写一些 css 样式进行调整,才会出来一整个长图,而且每个 txt 文件还要手动改后缀,还是不太理想。
而且由于 txt 文件和要改的图比较多,最终还是决定写个脚本,毕竟提高效率后,才有时间摸鱼嘛。
思路
因为是 txt 文件,所以我当时的想法是,通过点击上传该文件,然后获取文件里的内容,再把内容渲染到页面中显示出来。
这样我就不用去复制每个小图到 ps 里再合并成长图,可以在页面中直接截一个长图复制到 ps 里就可以了,一步到位。
解决方案
步骤一:先写一个静态页面,可以上传文件,以及渲染显示图片的位置。
界面:
HTML代码:
<body style="background-color: #e8e8e8;">
<input type="file" name="file" id="file">
<h4>图片:</h4>
<div id='read'></div>
</body>
步骤二:当上传了文件后,读取文件里的内容,并打印出来。
这里主要使用 FileReader()
在 js 里去读取本地文件。
JS代码:
<script>
// 获取文件选择框DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
</script>
打印结果:
步骤三:检查打印结果,看是否读取到了文本里的内容,然后将读取到的内容渲染到页面中去就可以了。
上面的打印结果说明我已经成功读取到了文本里的内容,我就可以将其渲染到页面中去了。
这里主要使用 innerHTML
将文本内容转成 html
标签,然后插入到图片要显示的地方去。
JS代码:
<script>
// 获取文件选择框和文件内容输出框的DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
// 调用渲染方法
txtContent(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
function txtContent(f){
// 将文本转成html标签并渲染
document.getElementById('read').innerHTML = f;
}
</script>
页面渲染结果:
页面渲染成功,但这里有一个小问题,每个小图之间都有一点空隙,这是因为 img
标签是行内元素,以基线对齐。
给它的父元素加上 font-size: 0;
的样式,就可以了。
这样空隙就没有了,到这里这个脚本就成功了,我又有时间可以摸鱼了。
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染长图</title>
</head>
<body style="background-color: #e8e8e8;">
<input type="file" name="file" id="file">
<h4>图片:</h4>
<div id='read' style="font-size: 0;"></div>
</body>
<script>
// 获取文件选择框和文件内容输出框的DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
// 调用渲染方法
txtContent(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
function txtContent(f){
// 将文本转成html标签并渲染
document.getElementById('read').innerHTML = f;
}
</script>
</html>
[1] 原文阅读
我是 Just,听说长的好看的都关注订阅号[ 设计师工作日常 ]
了!skr~ skr~