vue 使用html2canvas将DOM转化为图片

Bertha 。 2022-04-10 01:37 451阅读 0赞

## 一、前言 ##

我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

**注意：版本比较多，这里介绍最新版**[自己动手实现一个html2canvas][html2canvas]

## 二、代码 ##

### 1. 安装 ###

npm install html2canvas --save

现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。

### 2. 使用 ###

<div class="imageWrapper" ref="imageWrapper">
        <img class="real_pic" :src="dataURL" />
        <slot></slot>
    </div>

slot里面是你需要转化为图片的DOM元素。

data() {
        return {
            dataURL: ''
        }
    },

dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。

methods: \{

toImage() {
        html2canvas(this.$refs.imageWrapper,{
            backgroundColor: null
        }).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            this.dataURL = dataURL;
        });
    }

\}

html2canvas的用法非常简单，不过1.0.0已经将写法改为了promise，在.then方法里获取canvas对象。

### 3.常见bug ###

#### 1. 生成出来的图片有白色边框 ####

在配置项里配置backgroundColor: null即可。

#### 2. 有图片显示不出来并有报错（一般是跨域的错） ####

这是最常见的一个bug，就是这个插件无法生成跨域了的图片，也看了官方文档配置了也百度了都没有好的办法，最后是让后端直接把跨域的图片转成base64，就完美解决了这个问题。

#### 3. 生成图片后会在原始DOM上覆盖而产生一个闪动的效果 ####

先让生成的图片隐藏，等生成好以后再展示。（没有在手机上测试，效果不一定令人满意）

### 4.经典版本(0.5.0)常见bug ###

1.生成的图片模糊  
2.有跨域图片导致生成的图片不完整

这两个问题网上百度都有很多解决办法。

## 三、结语 ##

如果遇到任何无法解决的问题请在评论里留言。

来源：[https://segmentfault.com/a/1190000016349236][https_segmentfault.com_a_1190000016349236]

[html2canvas]: http://www.jqhtml.com/22447.html
[https_segmentfault.com_a_1190000016349236]: https://segmentfault.com/a/1190000016349236

发表评论取消回复

表情：

评论列表（有 0 条评论，451人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用html2canvas将页面转化为图片

需求是微信端将页面截屏之后保存到本地，使用了html2canvas插件 install `npm install --save html2canvas` 在所需页面

傷城~/ 2023年10月11日 16:42/ 0 赞/ 14 阅读

相关 html转图片_如何将html转化为图片

需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。如何将html转化为图片呢，一般是4个步骤。 1，在html里新建canvas画布

╰+攻爆jí腚メ/ 2023年09月24日 13:01/ 0 赞/ 25 阅读

相关 vue通过html2canvas来将div保存成图片

html2canvas链接：[官网][Link 1] html如下： <div class="char" id="char" ref="char"></div>

怼烎@/ 2022年12月07日 11:48/ 0 赞/ 192 阅读

相关结合使用katex html2canvas 将LaTeX公式保存为图片

1. 首先引入katex和html2canvas库，在引入katex的时候注意要把CSS也引进来，保证公式渲染位置正确 2. 调用katex的`renderToString

怼烎@/ 2022年11月22日 12:49/ 0 赞/ 217 阅读

相关使用html2canvas制作图片

@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html>

阳光穿透心脏的1/2处/ 2022年11月22日 10:28/ 0 赞/ 165 阅读

相关 Vue 中使用 html2canvas 把 html 元素导出为图片

一、安装 npm install html2canvas 二、引入并注册 html2canvas import html2canvas from 'htm

忘是亡心i/ 2022年09月04日 07:49/ 0 赞/ 201 阅读

相关 html2canvas将html内容生成canvas图片实现方式

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年08月31日 15:24/ 0 赞/ 485 阅读

相关 vue 使用html2canvas将DOM转化为图片

一、前言我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

Bertha 。/ 2022年04月10日 01:37/ 0 赞/ 452 阅读

相关 html2canvas 将html代码转为图片

转换代码到图片使用html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。使用 html2canvas html2c

以你之姓@/ 2021年09月14日 02:06/ 0 赞/ 446 阅读

相关 vue - 使用 html2canvas 将页面转为图片，实现分享功能

最近写的需求设计到了分享图片给好友的功能，所以我在这里总结一下实现方法，以及遇到问题的解决方法。一、效果图： 1、原页面： ![在这里插入图片描述][wat

素颜马尾好姑娘i/ 2021年09月02日 06:04/ 0 赞/ 836 阅读