# vue-image-mix

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

Latest version **1.1.3** (published 2022-06-06) · 0 weekly downloads

## Install

```sh
npm install vue-image-mix
pnpm add vue-image-mix
yarn add vue-image-mix
bun add vue-image-mix
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2022-06-06 |
| First published | 2022-06-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 2 |
| Unpacked size | 748.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kaka12138 |

## Links

- npm: https://www.npmjs.com/package/vue-image-mix
- npm.io page: https://npm.io/package/vue-image-mix

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [@rollup/plugin-image](https://npm.io/package/@rollup/plugin-image.md) ^2.1.1

## Recent versions

- 1.1.3 (latest) — 2022-06-06
- 1.1.2 — 2022-06-06
- 1.1.1 — 2022-06-06
- 1.1.0 — 2022-06-06
- 1.0.4 — 2022-06-06
- 1.0.3 — 2022-06-06
- 1.0.2 — 2022-06-06
- 1.0.1 — 2022-06-06

## README

## vue-image-mix
根据canvas实现的图片合成组件

### 安装
```
npm install vue-image-mix -S
```

### props

| 参数     | 说明          | 类型            | 默认值 |
|--------|-------------|---------------|-----|
| width  | 设置canvas的宽度 | Number,String | 400 |
| height | 设置canvas的高度 | Number,String | 500 |

### Methods
| 方法名                 | 说明          | 参数               |
|---------------------|-------------|------------------|
| init                | 初始化组件，必须调用  | 无                |
| drawBackgroundImg   | 绘制背景图（不可修改） | 背景图片地址           |
| drawIconImage       | 绘制非背景图      | 图片地址             |
| deleteIconImage     | 删除图片        | drawIconImage返回值 |
| exportImage         | 导出合成的图片     | 无                |
| deleteBackgroundImg | 删除背景图片      | 无                |

### 实例
```vue
<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>

```

---
_Source: https://npm.io/package/vue-image-mix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._