安利一款h5页面生成海报的插件---html2canvas

html2canvas会将HTML内容写入Canvas生成图片

html2canvas官网

在开始使用脚本之前,需要了解一些有关脚本及其某些限制的知识。

介绍

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。

浏览器兼容性

它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

1.安装
可以通过npm安装 ,也可以下载内置版本(官网有详细说明)

2.基本语法

html2canvas(element, options);
html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

或者使用ES6的promise

//两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
Html2canvas(document.getElementById('poster')).then((canvas) =>{
	const imgUrl = canvas.toDataURL(); //图片地址
});

在这里插入图片描述
注意事项
html2canvas 在画海报的时候 不能使用网络图片,如果存在网络图片的话,需要把图片保存到本地,或是转成base64编码的格式才可以,

图片https格式转成base64编码格式的 可以采用canvas实现

    // 处理图片格式
    getBas64(url, outputFormat = 'image/png') {
        /**
         * @description: 图片转base64
         * @param {String} url 需要转换的图片原链接(http://....jpg)
         * @param {String} outputFormat 转换出来的图片的类型(canvas支持jpg/png格式)
         * @return: 返回图片对应的base64编码
         */

        const t = this;
        let canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d');
            img = new Image;

        img.crossOrigin = 'Anonymous'; // 重点!设置image对象可跨域请求
        img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            let dataURL = canvas.toDataURL(outputFormat);
            canvas = null;

            return dataURL;

        };

    }
```javascript

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值