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

最新推荐文章于 2024-08-10 14:42:16 发布

继续向前~

最新推荐文章于 2024-08-10 14:42:16 发布

阅读量2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_41544124/article/details/102706332

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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