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

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

详解使用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

相关文章

  • html5拖拽应用记录及注意点的介绍

    html5拖拽应用记录及注意点的介绍

    下面通过代码给大家介绍html5拖拽应用记录,具体代码如下所示: e.dataTransfer.setData(a,设置的值);e.dataTransfer.getData(a);function drop(e){ !--尝试console.log(e),这里能拿到好多你用得到的api-- e.dataTransfer.setData(a, e.t......
    06-02
  • 详解Html5 canvas画图白板踩坑

    详解Html5 canvas画图白板踩坑

    最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了。 主要是记录一下自己菜到像傻子一样的技术。 1、canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大。 2、图片上传!白板涂鸦的内容是以base64的形......
    06-02
  • video实现有声音自动播放的教程

    video实现有声音自动播放的教程

    video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音, 2- 怎么实现有声音自动播放? 3- 鼠......
    05-20
  • video.js支持m3u8格式直播的实现教程

    video.js支持m3u8格式直播的实现教程

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化......
    05-20
  • 详解HTML5 HTMLCollection和NodeList的区别

    详解HTML5 HTMLCollection和NodeList的区别

    获取 HTMLCollection 对象 getElementsByTagName() 方法返HTMLCollection对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 注意: HTMLCollection 不是一个数组! HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像......
    05-01
  • canvas绘制太极图的实现

    canvas绘制太极图的实现

    看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下 css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000;}#canvas{ animation: rotate 6s linear infinite; }/* 给太极图设置旋转动画 */@keyframes......
    05-01
  • html5中使用hotcss.js实现手机端自适配

    html5中使用hotcss.js实现手机端自适配

    Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的。 1.......
    04-25
  • 详解HTML中meta标签及Keywords

    详解HTML中meta标签及Keywords

    关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处,还有欺诈的嫌疑。 键字标签K......
    04-21
  • 移动端h5页面根据屏幕适配的四种方案总结!

    移动端h5页面根据屏幕适配的四种方案总结!

    方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案: https://github.com/amfe/lib-flexible (此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-width始......
    04-21
  • html5 canvas实现光线沿不规则路径运动的代码

    html5 canvas实现光线沿不规则路径运动的代码

    svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 !DOCTYPE html html he......
    04-21

最新更新