应用html2canvas完成将html內容写入到canvas中转化成

日期:2020-12-11 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

以前大家简易的掌握了canvas的基础用法,这里大家来掌握下怎样将html內容写入到canvas中转化成照片,这里我应用到了html2canvas软件,这个软件是根据canvas完成的

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

1:免费下载html2canvas软件

1:立即免费下载html2canvas软件

立即点一下html2canvas.min.js,随后立即ctrl+s开展储存便可

2:应用npm开展免费下载

npm install html2canvas

2: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"

3:简易案例

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內容传到服务端,服务端能够将照片开展储存起来

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。