用html做一个豆瓣网阅读页面,使用JS制作豆瓣读书报告的长图片
2018年的豆瓣读书报告采用了微信小程序,不能再像以前那样方便的截取长图片。只好另想办法,最后利用网上搜到的代码结合截图软件达到了目的。
1、新建一个html文件,输入下面的代码:
测试页面
//下面用于多图片上传预览功能
function setImagePreviews(avalue) {
var docObj = document.getElementById("doc");
var dd = document.getElementById("dd");
dd.innerHTML = "";
var fileList = docObj.files;
for (var i = 0; i < fileList.length; i++) {
dd.innerHTML += "
";
var imgObjPreview = document.getElementById("img"+i);
if (docObj.files && docObj.files[i]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '200px';
imgObjPreview.style.height = '280px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
}
else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc)
var localImagId = document.getElementById("img" + i);
//必须设置初始大小
localImagId.style.width = "400px";
localImagId.style.height = "554px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
2、导入图片
点击网页中的按钮,到目标文件夹中全选图片。
1.png
,网页显示效果如下:
2.png
3、使用FastStone Capture 软件中的滚动截图功能就可以截取长图片了。
4、使用 Faster Image Viewer 软件编辑图片,去除周围的白边。
大功告成!!
用html做一个豆瓣网阅读页面,使用JS制作豆瓣读书报告的长图片相关推荐
- 使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行)
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...
- vue 做一个定点地图的页面(定位到你想要的地点)
实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...
- 做一个官网企业网站费用大概需要多少钱?
公司在建立他们的网站时,除了评估他们网站的功能.美感和服务之外,他们更关注管理建立网站的成本和预算.很多公司在建网站之前都会考虑这个问题,但是对于第一次建网站的人来说,做一个官网企业网站要注意什么? ...
- html做一个甜品登录注册页面,html西式甜品网制作.docx
PAGE PAGE # / 13 西式甜品网"首页面制作 .案例描述 1.考核知识点 ? 盒子模型 ? 元素的浮动与定位 2.练习目标 ? 掌握盒子的相关属性. ? 掌握元素的浮动与定位. ...
- 用html做一个15页的页面,html西式甜品网制作(15页)-原创力文档
. "西式甜品网"首页面制作 一.案例描述 1.考核知识点 盒子模型 元素的浮动与定位 2.练习目标 掌握盒子的相关属性. 掌握元素的浮动与定位. 3.需求分析 盒子模型这样的布局 ...
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
- java 爬取百度云盘,python爬虫爬取百度网盘-怎么做一个百度网盘搜索引擎
因为要做去转盘网,所以一定要爬取网盘资源,本来想自己写一个爬虫挺不容易的,不想分享出来,但最后还是决定了拿给大家一起看吧,毕竟有交流才有进步,有兴趣的朋友也可以看看我写的其他日志或者关注我,会发现去转 ...
- python爬虫教学百度云_python爬虫爬取百度网盘-怎么做一个百度网盘搜索引擎
因为要做去转盘网,所以一定要爬取网盘资源,本来想自己写一个爬虫挺不容易的,不想分享出来,但最后还是决定了拿给大家一起看吧,毕竟有交流才有进步,有兴趣的朋友也可以看看我写的其他日志或者关注我,会发现去转 ...
- 新手怎么做一个免费的单页面响应式网站?
单页面网站近年来受到很多企业青睐,一个干干净净的单页面,不仅能直观地传达企业信息,在展示上也给了企业更多的可能性.部分企业做单页面网站是为了做营销活动,不仅能为主站引流,更能让单页网站的转化更为直观, ...
最新文章
- 面向对象(内部类,static,包,访问修饰符,final)
- OVS bridge和port(三十三)
- ACM公选课第四节高精度 2020.4.9课-2020.4.10补
- 【redis】使用 URI 配置 redis
- sublime text 食用笔记
- Linux基金会:Linux已经战胜微软
- 想上云,请评估与思考上云目的
- Pandas使用小技巧
- Qt文档阅读笔记-Label QML Type官方解析及实例
- C# TCP 相关类与方法
- 表示不同文件类型的魔术数字
- The type javax.xml.rpc.ServiceException cannot be resolved.It is indirectly
- TensorFlow HOWTO 1.4 Softmax 回归
- sharepoint 2007 无法自动跳转到default.aspx
- linux脚本自动 输入命令,Linux脚本自动输入密码
- 一文讲清楚【KL距离】、【torch.nn.functional.kl_div()】和【torch.nn.KLDivLoss()】的关系
- 通过VBA锁定单元格的值
- 图形化的电力通信光纤资源管理系统概述与功能特点
- Git-Dumper工具:从站点中导出一个Git库
- 前端工程师的摸鱼日常(13)