vue-html2canvas html转img

最新推荐文章于 2025-10-30 13:49:29 发布

原创最新推荐文章于 2025-10-30 13:49:29 发布 · 676 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何利用html2canvas库将HTML页面内容转换成图片。首先通过npm安装html2canvas，然后在Vue组件中使用ref属性指定要转换的HTML元素，最后调用html2canvas方法并将结果保存为Data URL格式的图片源。

1.npm安装

npm install --S html2canvas

2.设置ref

<div ref="img" style="padding:10px;background:#f5da55">
    <h4 style="color:#000;">Hello world!</h4>
</div>

3.转换

<div v-show="is_img_show">
    <img :src="imgSrc">
</div>

html2canvas(this.$refs.img).then(canvas => {//html 转 canvas
    //canvas转img
    this.imgSrc = canvas.toDataURL("image/png");
    if (this.imgSrc !== "") {
        this.is_img_show = true;
    }
    //canvas转img END
    //document.body.appendChild(canvas); 给body添加canvas
});