<!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. 微信小程序个人/企业开放服务类目一览表

    微信小程序个人/企业开放服务类目一览表   微信小程序个人开放服务类目表 服务类目 类目分类一 类目分类二 引导描述 出行与交通 代驾 / / 生活服务 家政.丽人.摄影/扩印.婚庆服务.环保回收/废 ...

  2. （转）python中函数参数中如果带有默认参数list的特殊情况

    在python中函数参数中如果带有默认参数list遇到问题 先看一段代码 1 2 3 4 5 6 7 8 9 def f(x,l=[]):     for i in range(x):         ...

  3. 入学java的第一天

    登录http://www.oracle.com,下载JDK(J2SE) JDK 1.0,1.1,1.2,1.3,1.4 1.5(JDK5.0) 支持注解.支持泛型 1.6(JDK6.0)Server2 ...

  4. 学习笔记CB004:提问、检索、回答、NLPIR

    聊天机器人,提问.检索.回答. 提问,查询关键词生成.答案类型确定.句法和语义分析.查询关键词生成,提问提取关键词,中心词关联扩展词.答案类型确定,确定提问类型.句法和语义分析,问题深层含义剖析.检索 ...

  5. 学习笔记DL003:神经网络第二、三次浪潮，数据量、模型规模，精度、复杂度，对现实世界冲击

    神经科学,依靠单一深度学习算法解决不同任务.视觉信号传送到听觉区域,大脑听学习处理区域学会“看”(Von Melchner et al., 2000).计算单元互相作用变智能.新认知机(Fukushi ...

  6. C# 关于变量使用范围容易犯错的问题（TreeView数据绑定为例）

    asp.net做一个treeview数据绑定 绑定子节点时查询出来的数据正确,但在进行数据绑定时一直索引溢出 然后调试 ... 调试 ... 再调试... 依然很崩溃  想到了是变量定义后面共用后的问 ...

  7. 在Django中运行ExtJS 事例

    网上关于ExtJS的事例挺多的,但是在Django中使用ExtJS挺少的,当然了,一些大牛觉得ExtJS运用在页面上是很简单的事,但是对于菜鸟来说,实在有点困难. 我这个例子是用在了sublime3这 ...

  8. RESTful摘要

    一种标准的模式的格式化URL为 /version/resource/key 例如,映射一个标识为"rasmus"的人 /v1/people/rasmus 安全性:安全的方法,获取资 ...

  9. 谷歌chrome浏览器vue调试工具vue-devtools的安装

    先导 vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 第一步: 我们可以先从git ...

  10. 网络请求 selenium

    网络请求 selenium 部分流程: 第一:爬虫引擎生成requests请求,送往scheduler调度模块,进入等待队列,等待调度.第二:scheduler模块开始调度这些requests,出队, ...