<!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. 点击按钮下载图片(ie,FF,chrome)

    参考网上的一些资料后,总结出来 <!DOCTYPE html><html> <head> <meta content="text/html; cha ...

  2. 实验四 CC2530平台上UART组件的TinyOS编程

    实验四 CC2530平台上UART组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530的UART.及其TinyOS编程方法 学生通过本实验 ...

  3. 寒假作业 pta编程总结2

    实验代码: #include<stdio.h>#include<stdbool.h> void toNUM(int n);void toUNIT(int n); int mai ...

  4. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  5. JavaScript属性（第三天）

    js语法非常灵活,这致使他非常好用,也造成它比较难掌握的地方: js中的值类型与引用类型在这里不做过多介绍,可以参照其他语言. js是可以动态添加属性的: var person={}; person. ...

  6. 使用python编辑和读取word文档

    python调用word接口主要用到的模板为python-docx,基本操作官方文档有说明. python-docx官方文档地址 使用python新建一个word文档,操作就像文档里介绍的那样: fr ...

  7. openstack--10--知识点补充

    关于uuid和Fernet方式比较 提供令牌有四种方式[fernet|pkiz|pki|uuid]默认是uuid.

  8. flutter Row 垂直或水平放置多个widget

    使用行(Row)水平排列widget,使用列(Column)垂直排列widget.在行或列中嵌套行或列实现复杂的布局.如下图所示: 此布局按行排列.该行包含两个子布局,左侧一列和右侧的图片 对于行(R ...

  9. python随机数学习笔记

    #coding:utf-8 import random # random.randint(1,10)产生1,10的随机整数 for i in range(1,5): ranint = random.r ...

  10. 批量删除ppt动画

    alt+F11打开宏编辑窗口,输入以下代码,运行即可: Sub removeALL() Dim I As Integer: Dim J As Integer Dim oActivePres As Ob ...