酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

详解使用html2canvas实现将html内容写入到canvas中生成图片

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-01-05
本篇文章主要介绍了详解使用html2canvas实现将html内容写入到canvas中生成图片,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的

html2canvas官网: http://html2canvas.hertzen.com/

一:下载html2canvas插件

1:直接下载html2canvas插件

直接点击html2canvas.min.js,然后直接ctrl+s进行保存即可
 

 

2:使用npm进行下载
 

npm install html2canvas

二:html2canvas使用介绍

在html2canvas中主要使用两种方法

1:将html内容写入到canvas中
 
 
html2canvas(element,options).then((canvas) =>{})

参数说明:

element:需要将html内容写入canvas的jQuery对象

options:配置信息

常用的配置基本信息:

scale:缩放比例,默认为1

allowTaint:是否允许跨域图像污染画布,默认为false

useCORS:是否尝试使用CORS从服务器加载图像,默认为false

width:canvas画布的宽度,默认为jQuery对象的宽度

height:canvas画布的高度,默认为jQuery对象的高度

backgroundColor:/画布的背景色,默认为透明(#fff),参数可以为#表示的颜色,也可以使用rgba

2:将canvas画布信息转化为base64格式图片

 

canvas.toDataURL("image/png")

如果你的html内容中有指定的内容不写入到canvas中的话,你可以给标签添加如下属性
 
 
data-html2canvas-ignore="true"

三:简单实例

1:引入html2canvas
 
 
<script src="js/html2canvas.min.js"></script>

或者使用import引入html2canvas
 
 
import html2canvas from 'html2canvas';

2:需要转化的的html内容
 
 
<div class="capture">
    <img src="./wj.jpg" alt="">
    <div>
        <span style="color: #f00;letter-spacing: 20px">这是文字文字</span>
        <span data-html2canvas-ignore="true">不写入canvas</span>
    </div>
</div>

3:将html内容写入canvas并转化为base64图片

 
html2canvas(document.getElementsByClassName("capture")[0], {
        scale: 2,//缩放比例,默认为1
        allowTaint: false,//是否允许跨域图像污染画布
        useCORS: true,//是否尝试使用CORS从服务器加载图像
        width: '500',//画布的宽度
        height: '500',//画布的高度
        backgroundColor: '#000000',//画布的背景色,默认为透明
    }).then((canvas) => {
        //将canvas转为base64格式
        var imgUri = canvas.toDataURL("image/png");
    });
这里注意jQuery对象是do

这里注意jQuery对象是document.getElementsByClassName("capture")[0]而不是document.getElementsByClassName("capture"),document.getElementsByClassName("capture")是DOM原生对象而不是jQuery对象

根据如上就可以实现将html内容写入canvas并转化为base64图片,这时候我们就可以将base64内容传到服务端,服务端可以将图片进行保存起来

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/708798.html

相关文章

  • 自适应与响应式的区别

    自适应与响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析 自适应 跟 响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法 一、什么是自适应布局 自适应布局就是宽度自适用布局,在不......
    02-11
  • HTML5自定义mp3播放器源码教程

    HTML5自定义mp3播放器源码教程

    audio对象 src兼容.ogg .wav .mp3 audio controls src=data/imooc.wav/audio width autoplay loop muted静音 audio controls src=data/imooc.wav autoplay loop width=500 height=500 muted/audio 播放play() var myAudio = new Audio();......
    01-08
  • 使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨 效果图: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocu......
    01-05
  • 详解使用html2canvas实现将html内容写入到canvas中生成图片

    详解使用html2canvas实现将html内容写入到canvas中生成图片

    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 html2canvas官网: http://html2canvas.hertzen.com/ 一:下载html2canvas插......
    01-05
  • 详解HTML文本属性&颜色控制属性

    详解HTML文本属性&颜色控制属性

    一、文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表上划线 (4)none代表什么格式都没有(默认是这个属性) 注意:none的大多数用处在我们使用a......
    12-18
  • 关于html字符串正则判断和匹配的使用介绍

    关于html字符串正则判断和匹配的使用介绍

    最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。 如何判断传入的字符串包含一个闭合html标签 /\/?[a-z][\s\S]*/i 这个其实并不能判断标签闭合的完整性或者顺序等,......
    12-13
  • H5页面适配iPhoneX的教程

    H5页面适配iPhoneX的教程

    iPhoneX 打消了物理按键,改成底部小黑条,这一窜改导致网页呈现了比力难堪的屏幕适配问题。对付网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理惩罚,所以我们只需要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶......
    12-03
  • Html5之自定义属性(data-,dataset)

    Html5之自定义属性(data-,dataset)

    定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById(box1);le......
    11-19
  • 移动端html5判断是否滚动到底部并且下拉加载

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联......
    11-19
  • 5分钟实现Canvas鼠标跟随动画背景方法

    5分钟实现Canvas鼠标跟随动画背景方法

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,......
    11-19

最新更新