今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地。  

  只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是生成的图片模糊

//直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
html2canvas(document.querySelector('div')).then(function(canvas) {
document.body.appendChild(canvas);
})

  

常见的解决方案是,生成一个多倍的画布,然后将其放在较小的容器内,这样就解决了截屏模糊的尴尬。

还有一个问题是怎么将图片绕过服务器保存至本地,canvas有个toDataURL的方法,然后a标签有个download属性,感觉简直天造之和。当然微信中屏蔽下载,可以借助微信的webview中的一个内置规则,只要是a标签(不含href属性)里面嵌套Img的,可以正常呼出保存至手机和分享给朋友的菜单栏。

以下是简单的demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
}
.test{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #87CEEB;
display: inline-block;
vertical-align:top;
}
canvas{
margin-right: 5px;
}
.down{
float: right;
margin: 40px 10px;
}
</style>
</head>
<body>
<a class="down" href="" download="downImg">下载</a> <div class="test">测试</div> <script src="js/html2canvas.js"></script>
<script>
//直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
html2canvas(document.querySelector('div')).then(function(canvas) {
document.body.appendChild(canvas);
})
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('div');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(2,2);
html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas) {
document.body.appendChild(canvas);
//canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
document.querySelector(".down").setAttribute('href',canvas.toDataURL());
});
</script>
</body>
</html>

  

js截图及绕过服务器图片保存至本地(html2canvas)的更多相关文章

  1. 2018-5-22-SublimeText-粘贴图片保存到本地

    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...

  2. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  3. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  4. iOS 将图片保存到本地

    //将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key {     NSUserDefaults* prefer ...

  5. iOS-iOS调用相机调用相册【将图片保存到本地相册】

    设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 - ...

  6. Android View转为图片保存为本地文件,异步监听回调操作结果;

    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...

  7. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  8. FFmpeg解码视频帧为jpg图片保存到本地

    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635

  9. java将base64解析图片保存到本地。

    将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...

随机推荐

  1. 如何把web.xml中的context-param、Servlet、Listener和Filter定义添加到SpringBoot中

    把传统的web项目迁移到SpringBoot中,少不了web.xml中的context-param.Servlet.Filter和Listener等定义的迁移. 对于Servlet.Filter和Li ...

  2. 全栈开发工程师微信小程序-上(下)

    全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...

  3. 简单粗暴的JavaScript笔记-1

    欢迎到我的简书查看我的文集 前言: 提示密码提示框 <head> <style> #div1 {width: 100px;height:50px;background:#FFC ...

  4. H5内联视频总结

    概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...

  5. 从PMP培训归来,跟大家聊聊做项目的套路

    管理也是一些套路的传承,很多人说不去学专门的管理,照样把工作做得很好.是的,不是散打乱打就不能赢,只是会吃点亏而已.如果你有了套路在心中,那么必定会让自己车到山前开路,让事情更好办. 所以,我去学了几 ...

  6. spring boot -thymeleaf-异常处理

    异常流程 :controller-ControllerAdvice-异常解析器-默认的error页面 1.错误页面error.html: 程序出现异常会自动跳到error.html里,视频效果,该页面 ...

  7. iview导航菜单updateOpened和updateActiveName的使用

    先看官方文档: iview导航菜单 这里主要遇到的问题有两个: 1. 点击回到首页(B按钮)时需要取消选中当前选中的菜单项(全部不选中),这里用到的是 updateActiveName方法 2. 点击 ...

  8. ubuntu16.04 离线安装nginx

    场景描述: 客户生产环境服务器,内网隔离无法访问互联网,需要准备好相应的安装包,离线部署. 服务器&软件包版本: 环境: ubunt16.04 gcc-4.8.4 包: nginx-1.8.1 ...

  9. Java核心技术及面试指南 集合部分总的面试题归纳以及答案

    3.6.1ArrayList和LinkedList有什么差别?在哪种场景里应当用ArrayList(或LinkedList)? 大家如果学过数据结构,这个问题不难回答:前者是基于数组,数组比较擅长索引 ...

  10. java-vip介绍

    大叔Springboot+微服务+持续集成和交付VIP(价格:5000元) springboot部分 微服务部分 持久集成和交付部分 springboot部分 视频课(10讲) 项目源代码(api r ...