<!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>html2img</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            position: relative;

        }

        .s_html {

            width: 100%;

            position: relative;

        }

        .s_html img {

            display: block;

        }

        .msg_1 , .msg_2 {

            position: absolute;

            width: 100%;

            box-sizing: border-box;

            height: 60px;

            line-height: 60px;

            text-align: center;

            left: 0;

        }

        .msg_1 {

            bottom: 120px;

            padding: 20px;

        }

        .msg_1 div{

            background: red;

            width: 100%;

        }

        .msg_2 {

            bottom: 188px;

            padding: 20px;

        }

        .msg_2 div {

            background: blue;

            width: 100%;

        }

        .down {

            position: absolute;

            bottom: 80px;

            right: 20px;

            z-index: 1;

            padding: 10px 20px;

            border-radius: 10px;

            background: rgba(0, 0, 0, .6);

        }

    </style>

</head>

<body>

    <div id="s_html" class="s_html">

            <!-- <a class="down" href="" download="downImg">下载</a> -->

        <img width="100%" src="./img/1212.jpg" alt="bg">

        <div class="msg_1" id="msg_1">

            <div>

                lpl <span>总冠军</span>

            </div>

        </div>

        <div class="msg_2" id="msg_2">

            <div>

                IG <span>牛逼</span>

            </div>

        </div>

    </div>

    <!-- <a class="down" id="down" href="" download="downImg">下载</a> -->

</body>

<script src="./js/jquery-3.3.1.js"></script>

<script src="./js/html2canvas.min.js"></script>

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

<script>

    // 获取jq转化为dom对象

    var s_html = $('#s_html').get(0);

    // 将html转化成canvas

    html2canvas(s_html).then(function(canvas) {

        // canvas宽度

        var canvasWidth = canvas.width;

        // canvas高度

        var canvasHeight = canvas.height;

        // 清空body

        $('#s_html').html('');

        // 渲染canvas

        $('#s_html').append(canvas);

        // 调用Canvas2Image插件

        var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);

        // 清空body

        $('#s_html').html('');

        // 显然img

        $('#s_html').append(img);

        $(img).css({

            "width": $('#s_html').width() + "px",

            "height": 'auto',

            "-webkit-touch-callout":"default"

        })

    })

</script>

</html>

地址https://github.com/TankRyze/html2img

H5转图片支持保存的更多相关文章

  1. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  2. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. 【转】前端图片该保存为什么格式？png or jpg？

    疑虑: 图片存储为web格式,该用什么格式保存呢?png?jpg?压缩比例该为多大?css spript的优劣?有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低.了解图片 ...

  4. js实现div转图片并保存

    最近工作中遇到的需求,将div转成图片并保存. 1.准备需要用到的js插件jquery-1.8.2.js,html2canvas.min.js(将div转换为canvas),bluebird.js(用 ...

  5. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  6. php获取网页中图片并保存到本地

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: save_img("http://www.jbxue.com" ?>

  7. php获取网页中图片并保存到本地的代码

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...

  8. android开发 socket接收图片并保存

    逻辑:接收到socket之后需要将socket发送的图片数据保存下来并通知handler更新界面 关键代码: public void readImage(Socket socket) { try { ...

  9. 实现app上对csdn的文章查看，以及文章中图片的保存 （制作csdn app 完结篇）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24022165 今天给大家带来CSDN的完结篇,即增加文章的查看和文章中图片的保存 ...

随机推荐

  1. react+umi+dva+antd中dva的数据流图解

  2. DEV gridview根据单元格值改变其他单元格格式

    string style = ""; private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid. ...

  3. 解决long类型传到前端损失精度问题

    原因: 解决办法:https://blog.csdn.net/xiaoxiangzi520/article/details/76522242 经过验证,发现上述解决办法回导致前端先后台传输数据时导致j ...

  4. 前端的UI框架

    iView 框架 使用场景 iView 主要适合大中型中后台产品,比如某产品的运营平台.数据监控平台.管理平台等,从工程配置.到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合 ...

  5. 【开发】iOS入门 - UIViewController学习笔记

    iOS里面的UIViewController类似于Android里的Activity. 目前了解到除了基本的UIViewController之外,还有两个比较特别的一个是UINavigationCon ...

  6. python实现redis分布式锁

    https://www.cnblogs.com/wangwei916797941/p/10030805.html

  7. 加密算法HASH和MD5模块hsahlib

    HASH Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出, ...

  8. Nginx failing to load CSS and JS files (MIME type error)

    Nginx failing to load CSS and JS files (MIME type error) Nginx加载静态文件失败的解决方法(MIME type错误) 上线新的页面,需要在n ...

  9. vue2-通过axios实现数据请求

    1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...

  10. mysql异常 ： The driver has not received any packets from the server.

    异常: 结论:域名写错了或报这个异常