怎么将html内容写入到canvas中并生成图片

怎么将html内容写入到canvas中并生成图片?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

在翁源等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、做网站 网站设计制作按需定制开发,公司网站建设,企业网站建设,品牌网站建设,营销型网站建设,外贸营销网站建设,翁源网站建设费用合理。

一:下载html2canvas插件

1:下载html2canvas插件

怎么将html内容写入到canvas中并生成图片

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

或者使用import引入html2canvas

import html2canvas from 'html2canvas';

2:需要转化的的html内容


    
    
        这是文字文字         不写入canvas     

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

关于怎么将html内容写入到canvas中并生成图片问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


当前文章:怎么将html内容写入到canvas中并生成图片
URL网址:http://myzitong.com/article/joodoc.html

其他资讯