js 利用html2canvas实现截图功能

最新推荐文章于 2025-07-01 15:37:54 发布

cmyh

最新推荐文章于 2025-07-01 15:37:54 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：日常备忘录文章标签： js截图 html2canvas js截图不全 js截图功能二维码不清晰

本文链接：https://blog.youkuaiyun.com/cmyh100/article/details/78029138

日常备忘录专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何利用html2canvas在JavaScript中实现截图功能，特别是在移动端遇到的截图不全问题。通过将百分比布局改为固定像素，并调整scale比例以平衡性能和清晰度，成功解决截图问题。此外，还探讨了如何处理截图后二维码不清晰的问题，建议在截图前先放大二维码以保持清晰，从而确保微信能正确识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要导入的文件：jquery.min.js，html2canvas.js，canvas2image.js，jquery.qrcode.min.js（如需二维码）

var shareContent = document.getElementById("imgmodel"); //需要截图的包裹的（原生的）DOM 对象

var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale * 1; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale : scale, // 添加的scale 参数
canvas : canvas, //自定义 canvas
logging : false, //日志开关
width : width, //dom 原始宽度
height : height//dom 原始高度

};

html2canvas(shareContent, opts).then(function(canvas) {

//生成图片
var img = Canvas2Image.convertToImage(canvas,canvas.width, canvas.height);

$(".body").append(img);
});

======================================================================

我在移动端开发使用它的时候，遇到了截屏不全的问题，原因是我待截图部分的内容用的是百分比布局，后来我换成了固定像素，藏在最下层

截图之后，成功的获取到了全部的内容

这样做的好处是，上面的scale = 2 ，是放大了两倍，但是倍数越大导致性能越慢，而且如果包含二维码，会导致二维码不清晰

二维码不清晰的后果是微信长按识别不了

一开始就同时放大待截图部分，这样截图出来的二维码是很清晰的，大家可以利用藏在背景下面来实现它

这样我们就能自动生成用户专属的二维码宣传海报