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制作豆瓣读书报告的长图片相关推荐

  1. 使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行)

    使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...

  2. vue 做一个定点地图的页面(定位到你想要的地点)

    实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...

  3. 做一个官网企业网站费用大概需要多少钱?

    公司在建立他们的网站时,除了评估他们网站的功能.美感和服务之外,他们更关注管理建立网站的成本和预算.很多公司在建网站之前都会考虑这个问题,但是对于第一次建网站的人来说,做一个官网企业网站要注意什么? ...

  4. html做一个甜品登录注册页面,html西式甜品网制作.docx

    PAGE PAGE # / 13 西式甜品网"首页面制作 .案例描述 1.考核知识点 ? 盒子模型 ? 元素的浮动与定位 2.练习目标 ? 掌握盒子的相关属性. ? 掌握元素的浮动与定位. ...

  5. 用html做一个15页的页面,html西式甜品网制作(15页)-原创力文档

    . "西式甜品网"首页面制作 一.案例描述 1.考核知识点 盒子模型 元素的浮动与定位 2.练习目标 掌握盒子的相关属性. 掌握元素的浮动与定位. 3.需求分析 盒子模型这样的布局 ...

  6. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  7. java 爬取百度云盘,python爬虫爬取百度网盘-怎么做一个百度网盘搜索引擎

    因为要做去转盘网,所以一定要爬取网盘资源,本来想自己写一个爬虫挺不容易的,不想分享出来,但最后还是决定了拿给大家一起看吧,毕竟有交流才有进步,有兴趣的朋友也可以看看我写的其他日志或者关注我,会发现去转 ...

  8. python爬虫教学百度云_python爬虫爬取百度网盘-怎么做一个百度网盘搜索引擎

    因为要做去转盘网,所以一定要爬取网盘资源,本来想自己写一个爬虫挺不容易的,不想分享出来,但最后还是决定了拿给大家一起看吧,毕竟有交流才有进步,有兴趣的朋友也可以看看我写的其他日志或者关注我,会发现去转 ...

  9. 新手怎么做一个免费的单页面响应式网站?

    单页面网站近年来受到很多企业青睐,一个干干净净的单页面,不仅能直观地传达企业信息,在展示上也给了企业更多的可能性.部分企业做单页面网站是为了做营销活动,不仅能为主站引流,更能让单页网站的转化更为直观, ...

最新文章

  1. 面向对象(内部类,static,包,访问修饰符,final)
  2. OVS bridge和port(三十三)
  3. ACM公选课第四节高精度 2020.4.9课-2020.4.10补
  4. 【redis】使用 URI 配置 redis
  5. sublime text 食用笔记
  6. Linux基金会:Linux已经战胜微软
  7. 想上云,请评估与思考上云目的
  8. Pandas使用小技巧
  9. Qt文档阅读笔记-Label QML Type官方解析及实例
  10. C# TCP 相关类与方法
  11. 表示不同文件类型的魔术数字
  12. The type javax.xml.rpc.ServiceException cannot be resolved.It is indirectly
  13. TensorFlow HOWTO 1.4 Softmax 回归
  14. sharepoint 2007 无法自动跳转到default.aspx
  15. linux脚本自动 输入命令,Linux脚本自动输入密码
  16. 一文讲清楚【KL距离】、【torch.nn.functional.kl_div()】和【torch.nn.KLDivLoss()】的关系
  17. 通过VBA锁定单元格的值
  18. 图形化的电力通信光纤资源管理系统概述与功能特点
  19. Git-Dumper工具:从站点中导出一个Git库
  20. 前端工程师的摸鱼日常(13)

热门文章

  1. 想了解大数据的鼻祖Hadoop技术栈,这里有一份优质书单推荐!
  2. Handle-Message的发送和处理
  3. Linux/Unix 系统简介
  4. wpf-使用IronPython调用python代码
  5. python画柱状图,在里面填充不同图案,使得黑白印刷可以分辨出来
  6. IBM Rational System Architect 许可证问题处理
  7. 新的开始!!!向上吧、少年
  8. Activiti源码分析(框架、核心类。。。)
  9. 读书记录|《2001 太空漫游》
  10. ABB robotstudio 创建系统小问题,谢谢