• 站长首页
  • 源码下载
    HTML源码 ASP源码 PHP源码 .NET源码 其他源码
  • 网站模板
    织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板
  • 站长素材
    字体下载 高清图片 网页模板 PSD素材 矢量素材
  • 网页特效
    返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效
  • 站长资讯
    网站运营 建站经验 搜索优化 互联网
登陆| 注册
快捷导航

源码下载

HTML源码 ASP源码 PHP源码 .NET源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板

站长素材

字体下载 高清图片 网页模板 PSD素材

网页特效

返回顶部 图片代码 鼠标特效 菜单导航

站长资讯

网站运营 建站经验 搜索优化 互联网

软件下载

电脑软件 安卓软件 苹果软件

建站工具

WEB服务器 网页设计 FTP工具 建站辅助

建站教程

服务器教程 CMS教程 脚本之家
80站长网

小程序微擎商城响应式企业图片响应as帝国小说

发布教程
  • 站长首页

  • 源码下载

  • 网站模板

  • 站长素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站工具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

HTML源码 ASP源码 PHP源码 .NET源码 其他源码 微擎微赞模块 VIP源码 淘宝客网站源码

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板

字体下载 高清图片 网页模板 PSD素材 矢量素材 免抠素材 PPT模板

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效 css3特效 日期时间 选项卡_滑动门 HTML5小游戏 动画效果 表单按钮 jquery特效

网站运营 建站经验 搜索优化 互联网

电脑软件 安卓软件 苹果软件

WEB服务器 网页设计 FTP工具 建站辅助

服务器教程 CMS教程 脚本之家

shopex插件 Discuz!插件 pjblog插件 wordpress插件 dedecms插件 ecshop插件

HTML教程 DIV&CSS Javascript/Ajax Dreamweaver XHTML教程 W3C教程

关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

当前位置:网站首页 > 网站基础 > HTML教程 > html2canvas将html代码转为图片的使用方法

html2canvas将html代码转为图片的使用方法

时间:2018-08-06 23:15 来源:未知 浏览: 次

转换代码到图片使用

html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。

使用 html2canvas

        html2canvas 的使用非常简单,简单到只需要传入一个 DOM 元素,然后通过回调拿到 canvas:


 

在实际使用的时候,有两个注意点:
        1.html2canvas 通过解析元素实际的样式来生成 canvas 图片内容,因此它对元素实际的布局和视觉显示有要求。如果要完整截图,最好将元素从文档流中独立出来(例如 position:absolute)

        2.默认生成的 canvas 图片在 retina 设备上显示很模糊,处理成 2 倍图能解决这个问题:   
var w = $("#code").width(); 
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍 
var canvas = document.createElement("canvas"); 
    canvas.width = w * 2; 
    canvas.height = h * 2; 
    canvas.style.width = w + "px"; 
    canvas.style.height = h + "px"; 
var context = canvas.getContext("2d");//然后将画布缩放,将图像放大两倍画到画布上 
    context.scale(2,2); 
    html2canvas(document.querySelector("#code"), {         
canvas: canvas,        
 onrendered: function(canvas)
{                ...       
  }   
});

使用 html2canvas的实际案例

1.html代码结构   
<section class="share_popup" id="html2canvas"> 
<p>html2canvas 的使用非常简单,简单到只需要传入一个 DOM 元素,然后通过回调拿到 canvas</p> 
<p><img src="1.jpg"></p> 
<p>html2canvas 的使用非常简单,简单到只需要传入一个 DOM 元素,然后通过回调拿到 canvas</p> 
 </section>
2.js代码结构   
var str = $('#html2canvas'); 
//console.log(str); 
html2canvas([str.get(0)], { 
    onrendered: function (canvas) { 
        var image = canvas.toDataURL("image/png"); 
        var pHtml = "<img src="+image+" />"; 
        $('#html2canvas').html(pHtml); 
    } 
});
    好评
    (0)
    0%
    差评
    (0)
    0%
    (作者:80站长网)   /   责任编辑:80站长网
    • 上一篇:HTML中的<meta>标签的使用详解
    • 下一篇:HTML页面原生VIDEO标签隐藏下载按钮功能
    • 收藏
    • 打印

    相关模板

  • 织梦dedecms娱乐新闻资讯网站源码(带手机移动端)

    织梦最新内核开发的织梦模板,该模板属于新闻、资讯类企业使用, 自带最新的手机移动端,同一个后台,数据即时同步,简单适用! 原创设计、手工书写DIV+CSS, 完美...

  • 2019-01-08 22:18:30 新闻资讯 新闻娱乐网站 新闻网站
  • 响应式LED显示屏光源类网站源码 HTML5智能LED灯具织梦模板

    响应式LED显示屏光源类织梦模板 HTML5智能LED灯具网站 源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联...

  • 2018-04-25 11:59:54
  • 焊接设备器材网站源码_焊接厂生产设备织梦模板

    焊接设备器材网站源码 焊接厂生产设备织梦模板 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联盟广告都能养...

  • 2017-03-22 19:51:09
  • 超大气织梦模板适合图片/素材/源码/公司/工作室小菜自用模板

    全新大气的界面设计+营销互动功能开发。完全满足企业工作室、图片素材下载、源码出售等网站! 因为开发比较多,所以此为整站源码打包(不带数据),包含完整的...

  • 2018-09-21 21:16:27
  • 养生会所连锁机构网站源码医疗养生资讯类网站织梦模板

    养生会所连锁机构网站源码 医疗养生资讯类网站织梦模板 1、该模板代码干净整洁; 2、效果相当的炫酷,相当简洁大气高端,模板简单,全部已数据调用,只需后台修...

  • 2017-03-10 12:00:38
  • 易经风水网站源码 八字算命 测字易经协会培训 带移动端

    易经风水网站模板 八字算命 测字易经协会培训 带移动端 高端大气 安装说明:先运行/install进行安装,安装完成后在后台-系统-数据库备份/还原-数据还原-还原数据 然...

  • 2019-02-11 12:21:46 易经风水 八字算命 测字 易经协会培训
  • 营销型机械设备类网站源码

    营销型机械设备类网站源码 机械销售量企业网站织梦模板 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联盟广...

  • 2017-03-29 10:44:44
  • 响应式汽车零件配件设备类网站织梦模板

    模板名称:响应式汽车零件配件设备类网站 织梦模板 (自适应手机端) 模板介绍: 织梦最新内核开发的模板,该模板属于企业通用、HTML5响应式、汽车零件、汽车设备、...

  • 2018-01-02 13:28:16 汽车零件 汽车配件

    教程列表

    • HTML教程
    • DIV&CSS
    • Javascript/Ajax
    • Dreamweaver
    • XHTML教程
    • W3C教程

    热门教程排行

    • 1 HTML基础教程入门之HTML样式
    • 2 HTML基础知识_编辑器
    • 3 HTML基础教程入门之|HTML标题
    • 4 HTML基础知识_HTML简介
    • 5 HTML基础知识之HTML元素
    • 6 HTML基础教程入门之HTML段落
    • 7 HTML基础教程入门之HTML属性
    • 8 Html基础知识_HTML常用的标签元素
    • 9
    • 10 详解前端在html页面之间传递参数的方法

    教程标签

      PbootCMS 大闸蟹素材 你好十一月 PHOTO 黑美人 双旦海报 坚果大礼包 红色 分类 Audio音乐播放器 透明丝绸 造型 asp文章管理系统 营养沙拉 艺术字 请帖 生活电器 淘宝网店 混血美女 集图小程序
    返回
    顶部
    联系我们 投稿指南 专家专栏 热门标签 广告投放 友情链接

    备案号: 辽ICP备16013735号

    Copyright © 2016-2018 80站长网 版权所有

    ×