js常用插件(三)之html2canvas生成海报

web前端小龚

已于 2023-10-11 10:32:00 修改

阅读量1.3k

点赞数

分类专栏： js插件文章标签： javascript js canvas 经验分享前端

于 2021-01-13 14:20:09 首次发布

本文链接：https://blog.csdn.net/qq_41560520/article/details/112563127

版权

js插件专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js常用插件之html2canvas截图生成海报

先引用cdn或自己下载下来

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

使用方法:

 <body>
        <button onclick="createPoster()">生成海报</button>
        <!-- 海报样式 -->
        <div class="poster-container" style="display: inline-block;">
           
        </div>
        <!-- 最终生成的海报图片 -->
        <img id="posterImg" style="width: 400p;height: 700px;" />
    </body>

 // 生成海报
    function createPoster() {
      $('html,body').scrollTop('0px');
        var dom = $('.poster-container')
        html2canvas(dom[0], {
            useCORS: true, //跨域
            allowTaint: false,
            logging: false,
            letterRendering: true,
            taintTest: true, //在渲染前测试图片
            dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比
            background: "#fff"
        }).then(function(canvas) {
             var imgUrl = canvas.toDataURL('image/png');
             document.getElementById('posterImg').setAttribute('src', imgUrl);
        })
    }

最后说一下如果海报里面的图片使用cdn产生跨域问题的解决方法

添加useCORS:true属性；
给要生成canvas的DOM中包含的每一个标签添加crossorigin="anonymous"属性
确保你的图片CDN服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头；
img标签src后面加上一个固定的字符串:‘http://xxx.com/fjksndfnsknfskdfks11231.png?any_string’,防止击穿CDN缓存

html2canvas只能截取可视区域的页面,生成之前记得 window.scrollTo(0, $(this).offset().top);

web前端小龚

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
js常用插件(三)之html2canvas生成海报

js常用插件之html2canvas生成海报欢迎点击: 个人官网博客移动端手势利器：先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>使用方法: <body> <button onclick="createPoster()">生成海报</button&
复制链接

扫一扫