PC端中将html转化成图片并自动下载_jquery html 转图片并下载-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42829670/article/details/82890746

本文介绍如何使用HTML2Canvas和Canvas2Image库将HTML页面，包括动态生成的二维码，转换为图片并提供下载功能。文章提供了详细的步骤和完整的源代码。

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

最近公司做项目有个需求就是将html网页转化成图片并通过出发按钮进行下载，看到这需求时开始一脸蒙蔽，通过查看其他大牛的技术文档，发现H5中canvas通过画布可以得到相应的效果，边整边试终于达到效果，下面直接开干:

需求:将html页面（包含生成的二维码），转化成图片并下载截图

1.需要引入的js库:

html2canvas.js

canvas2image.js

jquery.min.js（必须要）

qrcode.min.js （用于二维码的生成）

2.将html上的二维码进行生成

new QRCode(document.getElementById('code'), '');

// 设置参数方式

var qrcode = new QRCode('qrcode', {

text: 'http://xx.com?shareuid=25',(需要生成二维码的网址)

width: 90,

height: 90,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

</script>

3.通过点击按钮使其canvas画布并下载

$(document).ready(function () {

document.querySelector('.btn').onclick = function(){

html2canvas(document.querySelector("#codes")).then(function (canvas) {

//获取截取图片路径

var base64Url = canvas.toDataURL('image/png');

//存入页面指定位置

// document.getElementById("screenShotImg").src = base64Url;

//后台操作处理

// var base64 = "<img src=" + base64Url + " />"

//属于点击进行下载执行:

var triggerDownload = $("#tttt").attr("href", base64Url).attr("download", "order-1111.png");

triggerDownload[0].click();

});

}

});

</script>

源码

4.完整源码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/html2canvas.js"></script>

<script src="js/canvas2image.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="js/qrcode.min.js"></script>

<style type="text/css">

.btn {

width: 6rem;

height: 2rem;

line-height: 2rem;

text-align: center;

color: #fff;

background: red;

}

</style>

</head>

<body>

　<!--截取区域（通过Id控制） -->

<div id="codes">

<a id="tttt"></a>

<img id="picture" src="images/1.png">

<div id="code" class="img"></div>

</div>



<!-- 存放截图 -->

<img id="screenShotImg">

<div class="btn">点击截图</div>

<script>

new QRCode(document.getElementById('code'), '');

// 设置参数方式

var qrcode = new QRCode('qrcode', {

text: 'http://xxx.com?shareuid=25',

width: 90,

height: 90,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

</script>

<script type="text/javascript">

$(document).ready(function () {

document.querySelector('.btn').onclick = function(){

html2canvas(document.querySelector("#codes")).then(function (canvas) {

//获取截取图片路径

var base64Url = canvas.toDataURL('image/png');

//存入页面指定位置

// document.getElementById("screenShotImg").src = base64Url;

//后台操作处理

// var base64 = "<img src=" + base64Url + " />"

var triggerDownload = $("#tttt").attr("href", base64Url).attr("download", "order-1111111111.png");

triggerDownload[0].click();

});

}

});

</script>

</body>

</html>

希望能对你有所帮助;源码亲测，没有问题哈。js库没找到直接上传的地方，只能自己下载了哈。有问题可以xian相互交流哈，谢谢。