微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案
html2canvas 是一个相当不错的 JavaScript 类库，它使用了 html5 和 css3 的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas 通过获取页面的 DOM 和元素的样式信息，并将其渲染成 canvas 图片，从而实现给页面截图的功能。
官网：https://github.com/niklasvh/html2canvas
遇到的问题：
参考官方的 Demo，发现所截的图失真厉害。
解决方案：
将 canvas 的宽高放大到原容器宽高的 3 倍，参考代码如下：
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
</head>
<body>
<div id="to-image">
<h3>Html5页面截图 演示</h3>
<div style="background-color: #abc;padding: 10px">
Hello World!
<br>
<div style="background: url(1.jpg) center center; width: 500px;height: 300px;"></div>
<br>
<a href="http://phpgo.cnblogs.com" target="_blank">http://phpgo.cnblogs.com</a>
<br>
<textarea id="textArea" col="20" rows="3"></textarea>
</div>
</div>
<div style="background-color: red; padding: 10px; margin-top: 10px;">
<input id="do-image" type="button" value="开始截图">
</div>
<div id="show-image"> </div>
</body>
</html> <script type="text/javascript">
$(document).ready(function() {
$("#do-image").on("click", function(event) {
var dom = $('#to-image');
var width = dom.width();
var height = dom.height();
var type = "png";
var scaleBy = 3; // 缩放比例
var canvas = document.createElement('canvas');
canvas.width = width * scaleBy;
canvas.height = height * scaleBy + 60; // 60 是我处理完后发现短了一点，具体为什么不清楚，如果你也少的话，根据自己的项目调吧
canvas.style.width = width * scaleBy + 'px';
canvas.style.height = height * scaleBy + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);
html2canvas(dom[0], {
canvas : canvas,
onrendered : function(canvas) {
// 放到到原来的 3 倍
$("#show-image").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type)); // 在将放大的图片用CSS再缩小，方便在手机上清晰查看
$("#show-image img").css("width", width + "px").css("height", height + "px");
}
}); });
}); </script>
效果图：
完整示例下载：
参考：
https://www.zhihu.com/question/48217555
微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案的更多相关文章
- Jenkins管理插件（备份插件）
Jenkins管理插件 为了让所有的插件在 Jenkins 内可用,所有插件的列表可以访问链接 − https://wiki.jenkins-ci.org/display/JENKINS/Plugin ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- html2canvas html截图插件
以下我总结了一些注意事项,在代码中注释了,仅供参考. html2canvas.js点击付:完整使用的demo ,如下: <!DOCTYPE html><html lang=" ...
- 网页转图片--- html2canvas截图
最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑.特此总结一下,顺便分享一下demo: 链接:https://pan.baidu.com/s/1o98UBJO 密码: ...
- 微信小程序template富文本插件image宽度被js强制设置
这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...
- 有哪些可以将网页另存图片的chrome插件？功能类似网页截图
说实话chrome插件哪些,想找出最好最强的还真不容易,各有千秋.今天就概括性介绍下一些网页打印,图片另存为等常见需求的chrome插件.1.Awesome ScreenshotAwesome scr ...
- 一个可以自动生成css样式的插件happycss
一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取cl ...
- 微信小程序生成指定页面小程序码海报图片分享思路总结
本博客主要说下思路,具体代码不贴 1.考虑到组件复用,所以我把它做成一个自定义的组件 <my-poster id="getPoster" avater="{{ima ...
- 【VUE】图片预览放大缩小插件
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
随机推荐
- springcloud使用使用Feign-Ribbon做负载均衡实现声明式REST调用
什么是Feign Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解 ...
- 002_更新Nginx证书
全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL 1.自行颁发不受浏览器信任的SSL证书: HTTPS的SSL证书可以自行颁发,Linux下的颁发步骤如下: openssl g ...
- visual studio code插件精选
HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 JavaScript Atom G ...
- 在win7_64bit + ubuntu-12.04-desktop-amd64+VMware-workstation-full-10.0.1-1379776平台上安装ns-allinone-2.35
step1. ns-allinone-2.35的下载地址:http://www.isi.edu/nsnam/ns/ns-build.html#allinone step2. 在虚拟机中打开term ...
- [转] React 最佳实践——那些 React 没告诉你但很重要的事
前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...
- 桌面图形化安装的CentOS6.7中默认安装的yum不能正常使用
使用rpm -qa|grep yum,可以发现有好多关于yum的安装插件等东西... 从里面将的一些东西删除掉,只留下下面三个即可,其余的全部删除掉rpm -e yum-plugin-security ...
- Java多线程及并发
进程:它是内存中的一段独立的空间. 线程:位于进程中,负责当前进程中的某个具备独立运行资格的空间. 进程是负责整个程序的运行,而线程是程序中具体的某个独立功能的运行.一个进程中至少应该有一个线程. 多 ...
- 【LeetCode】151. Reverse Words in a String
Difficulty: Medium More:[目录]LeetCode Java实现 Description Given an input string, reverse the string w ...
- java 常用面试题
基础问题和思想:1.抽象类和接口的区别(单纯的语法区别只能给一半分,要说出来适用场景):2.hashcode()和equals()的关系:3.HashMap(Set)底层机制(用到的数据结构以及代码原 ...
- Android - Bottom Navigation View
目录 Android - Bottom Navigation View Android - Bottom Navigation View Overview 一直以来,关于Android的底部导航的功能 ...