html标签生成img图片

sunyin.liu

已于 2022-05-24 17:41:06 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： npm vue.js 前端

于 2022-05-13 10:14:13 首次发布

本文链接：https://blog.csdn.net/weixin_42066070/article/details/124746375

Vuejs 专栏收录该内容

70 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue.js项目中如何通过npm安装并使用html-to-image库，来将HTML内容转换为图片。首先，通过npm安装该库，然后在Vue应用中封装一个全局方法。接着，在具体的组件（如promote.vue）中调用这个方法，实现将页面内容转化为图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入JS文件

使用npm安装

npm install html2canvas

vue中使用封装一个全局的方法

在utils文件夹里创建一个htmltoimage.js文件，具体代码如下

import html2canvas from 'html2canvas'
import Vue from 'vue'

const IMAGE = {}

IMAGE.install = function (Vue) {
    Vue.prototype.$toImage = function (id, callback) {
        const ele = document.querySelector(`#${id}`)
        const eleW = ele.offsetWidth// 获得该容器的宽
        const eleH = ele.offsetHeight// 获得该容器的高
        const scale = 1
        const canvas = document.createElement('canvas')
        canvas.width = eleW * scale // 将画布宽&&高放大两倍
        canvas.height = eleH * scale
        canvas.style.width = eleW + 'px'
        canvas.style.height = eleH + 'px'

了解本专栏