<!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. SQLI DUMB SERIES-22

    (1)根据题目知道此处是双引号注入,其余的与上一关相同. 登录成功后,用burp抓包,再刷新浏览器页面.寻找闭合方式: 闭合方式果然为双引号. (2)其payload与21关相同,需要对payload ...

  2. Java基于opencv实现图像数字识别(三)—灰度化和二值化

    Java基于opencv实现图像数字识别(三)-灰度化和二值化 一.灰度化 灰度化:在RGB模型中,如果R=G=B时,则彩色表示灰度颜色,其中R=G=B的值叫灰度值:因此,灰度图像每个像素点只需一个字 ...

  3. scss初学小结（转阮一峰老师SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html）

    1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem i ...

  4. 关于mysql设置外键，实现参照性完整性约束，以及workbench上的一个bug（？）

    一.本次数据库中有student,course,sc表,其设置情况 -- 创建course表 CREATE TABLE `course` ( `cno` ) NOT NULL, `cname` ) D ...

  5. js中的call与apply随笔

    关于javascript中的call方法.总结网上的观点: 1: 继承. 2: 修改函数运行时的this指针. 可能说起来还是比较抽象,下面具体例子说一下: x.call(y) (1)y.m = x  ...

  6. mysql Incorrect usage of UNION and ORDER BY 错误备忘

    出现这个错误的语句是酱紫的 select xxx from aaa order by xxx union all select yyy from bbb order by yyy 错误原因居然是,如果 ...

  7. LeetCode - Implement Magic Dictionary

    Implement a magic directory with buildDict, and search methods. For the method buildDict, you'll be ...

  8. java数据结构之链表(java核心卷Ⅰ读书笔记)

    1.链表 数组和ArrayList的一个重大缺陷就是:从中间位置删除一个元素要付出很大的代价,因为在这个元素删除之后,所有的元素都要向前端移动,在中间的某个位置插入一个元素也是这个原因. (小感悟:s ...

  9. zabbix自定义监控主机

    目的: 从头开始自定义监控主机的磁盘.CPU.运行内存等 配置自动发现主机:设置ip地址范围,检查类型为zabbix客户端,端口未10050,键值为system.uname,设置唯一性准则为ip地址 ...

  10. Cocostudio 1.4 实现的Demo程序源码

    开发环境是CocoStudio 1.4 + Cocos2dx 2.2.3  把项目文件放到Cocos2dx下的projects文件夹下就可以执行了 压缩包里面包括了 源码 和资源文件 1.DemoSh ...