【Vue-html2canvas】vue的组件如何转换成图片格式【或如何使用vue组件制作图片Icon图标】

最新推荐文章于 2024-04-29 15:32:35 发布

weixin_43343144

最新推荐文章于 2024-04-29 15:32:35 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43343144/article/details/121899820

版权

本文介绍了一个Vue项目中使用html2canvas库将页面内容转化为图片的方案。在Vue组件中，通过ref获取div元素，然后利用html2canvas生成canvas，再将canvas转换为PNG图片。具体步骤包括设置div元素，导入html2canvas，然后在mounted生命周期钩子中调用转换方法。

摘要由CSDN通过智能技术生成

vue项目vue页面内容生成图片并保存本地方案 - SlightFly - 博客园

html2canvas - Screenshots with JavaScripthttp://html2canvas.hertzen.com/

<template>
    <!--【非常重要】这里如果要使用html2canvas方法来创建,则这里必须是div元素【如果为view则会找不到Dom】-->
    <div ref="imageDom" class="items own-flex-column-center">
        <view class="item first not-active"></view>
        <view class="item not-active"></view>
        <view class="item active"></view>
        <view class="item active"></view>
    </div>
</template>

<script>

import html2canvas from "html2canvas";

export default {
    /**
     * 功能：定义一个own-Password的Icon组件,然后生成Image图片类型
     * 特殊说明：
     *      1、这里使用Vue创建组件然后生成png图片
     */
    name: "ownPasswordIconTransformImage",
    data() {
        return {
            itemClassArray: ["active", "active", "active", "active"],
        };
    },
    mounted() {
        html2canvas(this.$refs.imageDom).then(canvas => {
            console.log(canvas);
            // 转成图片，生成图片地址
            let _imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
            console.log(`【>>=Vue组件转换成Images=<<】生成的图片URL=${_imgUrl}`);
        });
    },
};
</script>

<style lang="scss">

.items {
    $item-margin: 5;
    $item-width: 16;


    width: #{$item-width + ($item-margin * 2)}px;
    background: #FAFBFD;

    .not-active {
        background: #E8E8E9;
    }

    .active {
        background: #068DE6;
    }

    .item {
        height: #{$item-margin}px;
        width: #{$item-width}px;
        margin: 0 #{$item-margin}px #{$item-margin}px #{$item-margin}px;
    }

    .first {
        margin: #{$item-margin}px;
    }
}
</style>