pc端页面内容生成海报图片下载

最新推荐文章于 2024-04-20 15:45:50 发布

ncyangyang

最新推荐文章于 2024-04-20 15:45:50 发布

阅读量956

点赞数

分类专栏：海报下载海报图片文章标签： pc端生成海报 dom元素生成图片保存页面转为图片下载

本文链接：https://blog.csdn.net/ncyangyang/article/details/100977812

版权

下载海报同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

图片

1 篇文章 0 订阅

订阅专栏

海报

0 篇文章 0 订阅

订阅专栏

目前有一个需求，前端网页生成海报并且下载，经过几天的研究和查找，目前找到html2canvas.js这个可以把dom元素生成画布的插件，具体使用方式请参考官网或者自行查找，以下是我的部分页面代码，仅供参考，注意手机端因为和pc端不一样，点击下载无效，具体解决方法，请参考我的下一篇文章

html2canvas.js（上传的需要审核，可以在官网下）github下载https://github.com/niklasvh/html2canvas/releases

1.html css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pc端海报下载</title>
    <!-- 引入插件 -->
    <script src="js/html2canvas.min.js"></script>
    <style>
        body {
            text-align: center;
        }
        
        .center_title {
            width: 100%;
            height: 90px;
            background-color: rebeccapurple;
            text-align: center;
        }
        
        button {
            width: 50px;
            height: 30px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="content">
        <div class="test">
            <p class="center_title">测试</p>
        </div>
    </div>
    <div class="copy">
        <button onclick="copy()">截图</button>
        <a class="down" href="" download="downImg">下载</a>
    </div>
</body>

2js 代码

<script>
    var pic;
    var canvas2 = document.createElement("canvas");
    let _canvas = document.querySelector('.test');
    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 = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('.test'), {
        canvas: canvas2
    }).then(function(canvas) {
        pic = canvas;
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
    //点击的时候把图片复制到下面那个div下
    function copy() {
        document.querySelector(".copy").appendChild(pic);
    }
</script>

ncyangyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pc端页面内容生成海报图片下载

目前有一个需求，前端网页生成海报并且下载，经过几天的研究和查找，目前找到html2canvas.js这个可以把dom元素生成画布的插件，具体使用方式请参考官网或者自行查找，以下是我的部分页面代码，仅供参考，注意手机端因为和pc端不一样，点击下载无效，具体解决方法，请参考我的下一篇文章html2canvas.js（上传的需要审核，可以在官网下）github下载https://gi...
复制链接

扫一扫