美文网首页
使用JS制作豆瓣读书报告的长图片

使用JS制作豆瓣读书报告的长图片

作者: 麦睿蔻 | 来源:发表于2019-01-16 10:07 被阅读0次

2018年的豆瓣读书报告采用了微信小程序,不能再像以前那样方便的截取长图片。只好另想办法,最后利用网上搜到的代码结合截图软件达到了目的。

1、新建一个html文件,输入下面的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script type="text/javascript">
 //下面用于多图片上传预览功能
 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 += "<div style='float:left' > <img id='img" + i + "' /> </div>";
   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;
 }

</script>
</head>

<body>
<div style="margin :0px auto; width:990px;">
<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
<div id="dd" style=" width:990px;"></div>
</div>
</body>
</html>

2、导入图片

点击网页中的按钮,到目标文件夹中全选图片。


1.png

,网页显示效果如下:


2.png

3、使用FastStone Capture 软件中的滚动截图功能就可以截取长图片了。

4、使用 Faster Image Viewer 软件编辑图片,去除周围的白边。

大功告成!!

相关文章

  • 使用JS制作豆瓣读书报告的长图片

    2018年的豆瓣读书报告采用了微信小程序,不能再像以前那样方便的截取长图片。只好另想办法,最后利用网上搜到的代码结...

  • 使用Python来制作execl报告竟是如此的简单

    execl 报告我们经常使用,可以制作各种数据和图表报告, 下面我们使用python 制作一个超级简单的execl...

  • 简易计算器

    制作这个js实例,主要考验布局的使用和js原生的使用。 dome地址 laihuamin.github.io/js...

  • 58. 用模板实现网页展示的CSS和JS等静态文件

    在网页制作中,需要对网页进行美化。除了美工制作图片之外,我们还需要用到css 和 js 等。而这些文件需要使用静态...

  • 我的2016豆瓣读书统计

    豆瓣终于出了年度读书统计:我的2016豆瓣读书报告 这个标签云也太草率了。 不过好歹有个封面墙。

  • 2019-04-12定时器

    使用定时器是使图片上下移动 使用按钮控制的div 图片切换 js

  • 生活记录工具

    简拼。 图片制作软件Quik。 视频制作软件简书。 图文长版制作收趣云书签。 收藏制作好的产品

  • ropper.js裁剪图片

    用户选择头像或者图片,需要进行裁剪,使用ropper.js croper.js 图片裁剪 Author:Wuxia...

  • react-douban 仿豆瓣电影app项目

    前言 A React.js project 一个基于React.js仿豆瓣电影项目(demo),使用react-r...

  • lazyload.js

    lazyload.js详解 简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位...

网友评论

      本文标题:使用JS制作豆瓣读书报告的长图片

      本文链接:https://www.haomeiwen.com/subject/mappdqtx.html