Js 之将html转为图片html2canvas

最新推荐文章于 2023-10-08 17:17:12 发布
最新推荐文章于 2023-10-08 17:17:12 发布
阅读量219 收藏
点赞数
原文链接：http://www.cnblogs.com/yang-2018/p/11097849.html
版权

一、效果图

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /*海报生成开始*/
        .html-haibao-btn {
            cursor: pointer;
            font-size: 0.7em;
            padding: 7px;
            border-radius: 30px;
            position: fixed;
            top: 30%;
            right: 10px;
            z-index: 999;
            background: #ff8f22;
            color: #fff;
            line-height: 1;
        }
        .tc-template__bg {
            background: #03a9f4 !important;
        }
        .tcui-mask{
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0,0,0,0.6);
        }
        @media screen and (min-width: 1024px) {
            .tcui-dialog {
                width: 35%;
            }
        }
        .tcui-dialog {
            position: fixed;
            z-index: 5000;
            width: 80%;
            max-width: 300px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background-color: #FFFFFF;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        .tcui-dialog__bd {
            padding: 0 1.6em 0.8em;
            min-height: 40px;
            font-size: 15px;
            line-height: 1.3;
            word-wrap: break-word;
            word-break: break-all;
            color: #999999;
        }
        .tcui-dialog__ft {
            position: relative;
            line-height: 48px;
            font-size: 18px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .tcui-dialog__btn {
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            color: #3CC51F;
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            position: relative;
        }

        .tcui-mask_transparent {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0
        }
        .tcui-toast {
            position: fixed;
            z-index: 5000;
            width: 7.6em;
            min-height: 7.6em;
            top: 180px;
            left: 50%;
            margin-left: -3.8em;
            background: rgba(40,40,40,0.75);
            text-align: center;
            border-radius: 5px;
            color: #FFFFFF
        }
        .tcui-loading {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            background:transparent url('/mobile/image/loading.gif')no-repeat;
            background-size: 30px;
            background-position: center;
        }
        .tcui-icon_toast {
            margin: 22px 0 0;
            display: block
        }
        .tcui-icon_toast.tcui-icon-success-no-circle:before {
            color: #FFFFFF;
            font-size: 55px
        }
        .tcui-icon_toast.tcui-loading {
            margin: 30px 0 0;
            width: 100%;
            height: 38px;
            vertical-align: baseline
        }
        .tcui-icon_toast.tcui-icon-info,.tcui-icon_toast.tcui-icon-cancel {
            font-size: 55px;
            color: #FFF
        }
        .tcui-toast__content {
            margin: 5px 0 15px;
            color: #fff;
        }
        .tcui-dialog__ft:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #D5D5D6;
            color: #D5D5D6;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .html-haibao-box {
            width: 100%;
            position: absolute;
            top: -10000px;
            z-index: 999;
            background: #fff;
        }
        .html-haibao-box .haibao-pic {
            width: 100%;
            max-height: 300px;
            overflow: hidden;
        }
        .html-haibao-box .haibao-pic img {
            width: 100%;
            height: auto;
        }
        .html-haibao-box .haibao-title {
            line-height: 25px;
            font-size: 1.2em;
            padding: 10px;
            color: #000;
        }
        .html-haibao-box .haibao-zuozhe {
            width: 100%;
            height: 25px;
            margin-top: 10px;
            margin-bottom: 15px;
            color: #2b95d3;
        }
        .html-haibao-box .haibao-zuozhe-right {
            float: right;
        }
        .html-haibao-box .haibao-zuozhe-right .zuozheby {
            float: left;
            line-height: 25px;
            margin-right: 10px;
            color: #d8d8d8;
        }
        .html-haibao-box .haibao-zuozhe-right .zuozhelogo {
            width: 25px;
            height: 25px;
            float: left;
            margin-right: 5px;
        }
        .html-haibao-box .haibao-zuozhe-right .zuozhelogo img {
            width: 25px;
            height: 25px;
            object-fit: cover;
            border-radius: 100%;
        }
        .html-haibao-box .haibao-zuozhe-right .zuozhename {
            float: left;
            line-height: 25px;
            margin-right: 20px;
        }
        .html-haibao-box .haibao-zuozhe-left {
            float: left;
            margin-left: 15px;
        }
        .html-haibao-box .haibao-zuozhe-left .dian {
            width: 5px;
            height: 5px;
            background-color: #d8d8d8;
            border-radius: 100%;
            float: left;
            margin-right: 5px;
            margin-top: 9px;
        }

        .html-haibao-box .haibao-footer {
            width: 100%;
            height: 91px;
            background-color: #f8f8f8;
            border-top: 1px solid #eee;
            padding: 10px;
            float: left;
        }
        .html-haibao-box .haibao-footer .qrcode {
            width: 70px;
            height: 70px;
            float: left;
        }
        .html-haibao-box .haibao-footer .qrcode img {
            width: 70px;
            height: 70px;
            float: left;
        }
        .html-haibao-box .haibao-footer .desc {
            float: left;
            margin-left: 10px;
        }
        .html-haibao-box .haibao-footer .desc .desc_msg {
            line-height: 40px;
            font-size: 1em;
            color: #999;
        }
        .html-haibao-box .haibao-footer .desc .siteinfo {
            font-size: 1.05em;
            color: #333;
            height: 20px;
            line-height: 20px;
            width: 290px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_left {
            margin-bottom: -1px;
            width: 5px;
            height: 13px;
            margin-left: 6px;
            margin-right: 5px;
            display: inline-block;
            border-top: 2px solid #666;
            border-left: 2px solid #666;
        }
        .html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_right {
            width: 5px;
            height: 13px;
            margin-left: 4px;
            display: inline-block;
            border-bottom: 2px solid #666;
            border-right: 2px solid #666;
            margin-bottom: -3px;
        }
        /*海报生成结束*/
        body{
            height: 100%;
        }
        .content{
            height: 2000px;
            overfow-y: auto;
        }
    </style>
</head>
<body>
<div id="html-haibao-btn" class="html-haibao-btn tc-template__bg">生成<br>海报</div>
<div class="js_dialog" id="showHaibaoBox" style="display: none;">
    <div class="tcui-mask"></div>
    <div class="tcui-dialog">
        <div class="tcui-dialog__bd" style="padding:0;line-height: 40px;color: #999;border-bottom: 1px solid #eaeaea;">
            长按图片保存海报
        </div>
        <div class="tcui-dialog__bd" id="id_haibao_img" style="padding:0;">
            <img style="max-width: 100%;" src="">
        </div>
        <div class="tcui-dialog__ft">
            <a href="javascript:;" class="tcui-dialog__btn tcui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<div id="loadingHaibao" style="display:none;">
    <div class="tcui-mask_transparent"></div>
    <div class="tcui-toast">
        <i class="tcui-loading tcui-icon_toast"></i>
        <p class="tcui-toast__content">海报生成中...</p>
    </div>
</div>
<div id="html-haibao-box" class="html-haibao-box">
    <div class="haibao-pic">
        <img style="max-width: 100%" src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg">
    </div>
    <div class="haibao-title">{$title}</div>
    <div class="haibao-zuozhe">
        <div class="haibao-zuozhe-left">
            <div class="dian"></div>
            <div class="dian"></div>
            <div class="dian"></div>
        </div>
        <div class="haibao-zuozhe-right">
            <div class="zuozheby">Author</div>
            <div class="zuozhelogo"><img src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg"></div>
            <div class="zuozhename">{$user_info['company']}</div>
        </div>
    </div>
    <div class="haibao-footer">
        <div class="qrcode"><img style="max-width: 100%;" id="html-haibao-qrcode" src=""></div>
        <div class="desc">
            <div class="desc_msg">长按二维码识别阅读全文</div>
            <div class="siteinfo">来自<span class="kuohao_left"></span>同城头条&middot;乐清优选<span class="kuohao_right"></span>
            </div>
        </div>
    </div>
</div>
<div class="content">
    111
</div>
</body>
<script type="text/javascript" src="http://www.boyuan.com/mobile/static/lib/jquery/jquery-2.1.1.min.js"></script>
<script src="./html2canvas/html2canvas.min.js"></script>

</html>

<script>
    $("#html-haibao-btn").click(function () {
        $('#loadingHaibao').fadeIn(100);
        setTimeout(function(){loadHaibao();},100);
    });
    $(".tcui-dialog__btn").click(function () {
        $('#showHaibaoBox').fadeOut(200);
    })
    function loadHaibao() {
        var share_url = window.location.href;
        $.ajax({
            type: 'post',
            url: '/api/a/getHaiBao.php?action=article',
            data: {
                share_url: share_url,
                itemid: 523
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#html-haibao-qrcode").attr("src", res.qrcode);
                    html2canvas(document.querySelector("#html-haibao-box"), {allowTaint: false, y: "-10000"}).then(function(canvas) {
                        console.log(canvas);
                        var dataURL = canvas.toDataURL();
                        $('#id_haibao_img img').attr('src', dataURL);
                        $('#showHaibaoBox').fadeIn(200);
                        $('#loadingHaibao').fadeOut(100);
                    });

                }else{
                    layer.open({
                        content: res.msg
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                }
            },
            error: function(){

            },
            complete: function () {

            }
        })
    }
</script>

 三、插件下载地址

http://html2canvas.hertzen.com/

转载于:https://www.cnblogs.com/yang-2018/p/11097849.html

weixin_30642029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现html页面转图片、并保存到本地
StarFishing
11-30 2万+
js实现html页面转图片，并保存图片在本地，实现原理为（html转canvas、canvas转image） 需要的库：canvas2image.js 下载地址：https://github.com/SuperAL/canvas2image； 需要的库：html2canvas.js 下载地址：http://html2canvas.hertzen.com/dist/html2canvas.mi...
浏览器端JS脚本HTML 转 图片
02-16 1122
JS实现文字转图片
js将html转换成图片并下载
weixin_52168983的博客
06-28 1826
1：首先页面引入html2canvas.min.js，下载到本地。总结：希望对大家有所帮助，有其他好的方法或建议可以一起沟通。2：逻辑直接下载代码里了，上代码。
js将html页面转图片
一只程序猿
05-24 2888
可以使用html2canvas，实现在用户浏览器端直接对整个或者指定模块进行截屏。html2canvas其渲染成一个Canvas图片，能让用户保存为图片。 html2canvas官网地址：http://html2canvas.hertzen.com/ 1、可以使用npm和yarn进行安装，也可以直接下载原生js导入。 命令：npm install --save html2canvas ...
js实现html转图片保存
lihefei_coder的博客
03-13 7420
实现思路 使用html2canvas.js插件转把html转成canvas 使用canvas2image.js插件转把canvas转成image 调用canvas2image.js的方法保存图片 先贴代码，效果图在后边 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&am
js实现HTML转换成图片
热门推荐
shengsaihong的博客
08-10 2万+
html2image
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
根据DOM将html转为canvas图片格式
07-17
该代码为 html转base64图片格式，hmtl+js 需要IE9以上浏览器或firefox，chrome支持！
JavaScript通过canvas获取图片像素点并导出到文件转为RGB像素值HTML标签
06-15
1.通过JS技术把获取已知图片的像素值 2.获取到像素值去除A通道干扰 3.把最终的像素值一维数组转换HTML文件格式并导出到文件 4.懂JS获取文件内容的技术人员可以通过JS获取导出的文件内容，赋值给HTML标签，这样图片就...
微信小程序之html5 canvas绘图并保存到系统相册
11-21
1.网络图片需先配置download域名，可通过wx.getImageInfo转为临时路径； 2.个人习惯问题，我习惯使用async-await语法，所以需要引入regenerator这个库，使用方式可网上查。 一、封装通用微信api返回为Promise对象 /...
canvas实用小工具利用html5canvas将纯色背景图片的背景抠出转为png图片
08-10
canvas实用小工具，利用html5 canvas 将纯色背景图片的背景抠出， 转为png图片。
js实现html转图片并下载保存
03-13
用js通过html2canvas.js和canvas2image.js两个库，实现把页面转换成图片并保存到本地
html页面转换为图片
06-26
利用 html2canvas.js的jquery插件实现html页面转为图片，但不兼容IE8及IE8一下的版本，支持IE9及以上，火狐浏览器等
如何用js将html中的内容生成图片并下载
thesunofchina的博客
08-22 565
前端js将html页面中的内容生成图片
【JavaScript】js动态地将html生成图片，手机端长按保存到本地
一只洒鹿
04-24 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2c...
JavaScript实现html页面转换成图片格式
weixin_30879833的博客
11-07 691
本文提供三个JavaScript插件，并提供对应GitHub地址，自行查看使用方法： 1）dom-to-image：dom-to-image 2）html2canvas:html2canvas 3）rasterizeHTML.js：rasterizeHTML.js 转载于:https://www.cnblogs.com/web-wjg/p/7799315.html...
HTML5使用html2canvas转化为图片，然后再转为base64.
最新发布
m0_58266149的博客
10-08 1323
场景：今天同事提了个协助，将HTML5文件中的元素转为图片，并且最终转为base64格式传给后端。感觉还挺有意思就记录下。（试例如下）html部分（这个例子有一个特殊的地方，就是它会显示多个二维码标签。所有我这边使用 DOM来获取下父元素，然后再获取到底下的子元素。遍历下，一个一个转化为图片。代码如下，有不理解的可以留言讨论）">div内容">div内容//1、获取下父元素。
使用html2canvas.js将前端页面生成图片，并下载图片
qq_41964720的博客
10-18 2293
使用html2canvas.js将前端页面生成图片
前端使用html2canvas和pdfmake将html转为pdf并下载
05-05
要使用html2canvas和pdfmake将HTML转为PDF并下载，您可以按照以下步骤操作： 1. 首先，您需要在HTML页面中引入html2canvas和pdfmake的库文件。您可以通过以下方式在HTML文件中添加这两个库： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值