html2canvas 把h5网页保存为图片 区域保存

概述html2canvas 把h5网页保存为图片 想把一个网页得某些元素，绘制成图片保存，有些数据是接口动态加载的，所以不能UI给到图片，需要我们把api的数据也绘制到图片上 html2canvas这个插件可以完美解决，以下是使用方法和一些坑 html2canvas : http://html2canvas.hertzen.com/ index.html <section class="one-yua HTML2canvas 把h5网页保存为图片

想把一个网页得某些元素，绘制成图片保存，有些数据是接口动态加载的，所以不能UI给到图片，需要我们把API的数据也绘制到图片上

HTML2canvas这个插件可以完美解决，以下是使用方法和一些坑

HTML2canvas : http://html2canvas.hertzen.com/

index.HTML

<section >    <div ></div>    <div >        <div >            <img src="<%= static_url %>/images/webvIEw/one_yuan/hand_icon.png" alt="">            <span>长按分享给好友或保存邀请卡片</span>        </div>        <div >            <img src="<%= avatar %>"  alt="">            <img src="<%= static_url %>/images/webvIEw/one_yuan/page_share.png" alt="">            <p ><span ID="nickname"><%= decodeURIComponent(nickname) %></span>邀请您</p>            <p >1元解锁私人图书馆</p>            <img src="<%= qrcode.qrCodeUrl %>" alt="" >        </div>    </div></section>

index.sCSS

.one-yuan-popup {    @R_502_4612@: fixed;    wIDth: 100vw;    height: 100vh;    top: 0;    left: 0;    z-index: 501;    .light-Box {        display: block;        @R_502_4612@: fixed;        wIDth: 100%;        height: 100%;        top: 0;        bottom: 0;        left: 0;        right: 0;        background-color: rgba(0,.85);        cursor: pointer;    }    .content {        @R_502_4612@: relative;        wIDth: 77vw;        height: 131vw;        padding-top: 0;        background: #fff;        border-radius: 8px;        @R_502_4612@: fixed;        top: 0;        bottom: 0;        left: 0;        right: 0;        margin: auto;        z-index: 1002;        text-align: center;    }}

整体d窗风格就是如下图所示，我们要保存的是绿色圈出来的区域，箭头指向得都是API数据，并且要全屏显示

期待保存得图片是这样得

index.Js

let canvas2 = document.createElement('canvas'),// 创建canvas    _canvas = document.querySelector('.share-popup .content'),//此处可换body，或div等 我们一般可以放绘制的元素    w = parseInt(window.getComputedStyle(_canvas).wIDth),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';let context = canvas2.getContext('2d'),rect = $('.share-popup .content').get(0).getBoundingClIEntRect(); //获取元素相对于视察的偏移量context.scale(2,2);context.translate(-rect.left,-rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位// =====================================注意注意注意=================================// 必须先scale,再traslate，如果不是绘制全屏的话，这两句可以不加，正常绘制就会把margin区域也绘制上，如果需要不绘制margin区域，而且这个元素就根据窗口大小而居中，我们很不好控制，所以我们再这里先获取 getBoundingClIEntRect() 根据元素偏移，最后绘制出来全屏的，HTML2canvas(document.querySelector('.share-popup .content'),{    canvas: canvas2,useCORS: true,// 允许图片跨域    wIDth: 584,// 绘制图片的宽 2倍    dpi: window.devicePixelRatio * 2,// dpi  如果模糊的话 就把dpi和scale缩放的值调大 dpi越高生成的图片越大    height: 1188 // 绘制图片的高 2倍}).then(function(canvas) {    $('.share-canvas').CSS('display','block').attr('src',canvas.toDataURL());});

总结

以上是内存溢出为你收集整理的html2canvas 把h5网页保存为图片 区域保存全部内容，希望文章能够帮你解决html2canvas 把h5网页保存为图片 区域保存所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。