vue-image-mix v1.1.3

vue-image-mix

根据canvas实现的图片合成组件

安装

npm install vue-image-mix -S

props

Methods

实例

<template>
    <div id="app">
        <vue-image-mix ref="myCanvas" width="500" height="400"/>
        <button @click="changeBackground">修改背景图</button>
        <button @click="deleteBackground">删除背景图</button>
        <button @click="deleteIcon">删除图片</button>
        <button @click="exportImage">导出图片</button>
    </div>
</template>

<script>
import {defineComponent} from 'vue';
import VueImageMix from '@/vue-image-mix.vue';

export default defineComponent({
    name: 'ServeDev',
    components: {
        VueImageMix
    },
    data(){
        return {
            models:[],
        }
    },
    mounted() {
        this.$refs.myCanvas.init();
        const backgroundImage = require('./assets/backgroundImage/eachTemplate.png');
        let img = new Image();
        img.src = backgroundImage;
        img.onload = ()=>{
            this.$refs.myCanvas.drawBackgroundImage(img);
        }

        let img2 = new Image();
        img2.src = require('./assets/IconImage/eachMaterial.png');
        img2.onload = ()=>{
            const item = this.$refs.myCanvas.drawIconImage(img2);
            this.models.push(item);
        }

    },
    methods:{
        changeBackground(){
            let img = new Image();
            img.src=require('./assets/backgroundImage/eachTemplate1.png')
            img.onload = ()=>{
                this.$refs.myCanvas.drawBackgroundImage(img);
            }
        },
        deleteBackground(){
            this.$refs.myCanvas.deleteBackgroundImage();
        },
        deleteIcon(){
            this.$refs.myCanvas.deleteIconImage(this.models[0]);
        },
        exportImage(){
            const exportSrc = this.$refs.myCanvas.exportImage('image/png');
            let oA = document.createElement("a");
            oA.download = '导出图片';
            oA.href = exportSrc;
            document.body.appendChild(oA);
            oA.click();
            oA.remove();
        }
    }
});
</script>
<style scoped>
button {
    margin-left: 20px;
}
</style>