<!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. 关于Airtest的使用探索

    一.Airtest的简介   Airtest是网易出品的一款基于图像识别和poco控件识别的一款UI自动化测试工具.Airtest的框架是网易团队自己开发的一个图像识别框架,这个框架的祖宗就是一种新颖 ...

  2. JDK无法卸载问题解决

    在控制面板卸载JDK时,显示正在收集删除文件,进度条满了之后就闪退了,但JDK还在,试了几次都是如此. 后来,发现微软官方出了“修复阻止程序安装或删除的问题”的应用,可以自动修复包括阻止你安装或删除程 ...

  3. 什么是C/S模式与B/S模式，两者区别与优缺点

    转自https://wenwen.sogou.com/z/q1709598292.htm C/S (Client/Server,客户机/服务器)模式又称C/S结构,是软件系统体系结构的一种.C/S模式 ...

  4. myEclipse出现cannot paste the clipboard contents into the selected elements报错

    导入jar包报错,cannot paste the clipboard contents into the selected elements,查阅资料让重新打开工程,但依然报错. 最后在本地路径复制 ...

  5. Python变量和常量

    1.什么是变量 变量:核心在于变和量儿字,变->变化,量->状态如何定义? x=1 变量名 变量赋值符号:= 变量值:1 其中变量名又称为标识符: 1. 可以是字母,数字,下划线的任意组合 ...

  6. .NET中的StringBuilder

    为什么要使用StringBuilder 为什么使用StringBuilder要从string对象的特性说起. string对象在进行字符串拼接时,因为字符串的不可变性,string对象会每次拼接,都会 ...

  7. 配置https and http2 local本地开发环境

    今天,几乎所有你访问的网站都是受HTTPS保护的.如果你还没有这样做,是时候这样做了.使用HTTPS保护您的服务器也就意味着您无法从非HTTPS的服务器发送请求到此服务器.这对使用本地开发环境的开发人 ...

  8. AGC002 F - Leftmost Ball

    貌似哪里讲过这题..总之当时掉线了(理解能力又差水平又低选手的日常).. 看看题目,应该是DP. 尝试了几次换状态,毫无思路.那我们就来继续挖掘性质吧...为了更直观,我们令第i个出现的球颜色就是i( ...

  9. 10. Firewalls （防火墙 2个）

    Netfilter是在标准Linux内核中实现的强大的包过滤器. 用户空间iptables工具用于配置. 它现在支持数据包过滤(无状态或有状态),各种网络地址和端口转换(NAT / NAPT),以及用 ...

  10. 在windows上编译apr库

    环境: win7_x64旗舰版.VS2015企业版.CMake3.8 一.下载apr相关库 1.1)expat下载地址:https://github.com/libexpat/libexpat/rel ...