uniapp canvas海报-uni-app添加水印，并且实现循环展示

能。在应用《uniapp》使用方法中了解到该应用上的canvas是能连续绘制的,需要使用工具进行,该应用是一个使用vue的语法+微信小程序的标签和API的跨平台前端框架。

1.需要先在view中增加一个canvas

2.这里的两个参数只需要关注第一个path就行了,为相册选择的图片地址或者拍照得到的图片地址

3._this的声明

4.效果图

<template>

<view>

<button @tap="add">增加</button>

<view class="file" v-if=">0" v-for="(filepath,index) in filesArray" :key="index" >

<image  :src=filepath[0] mode="scaleToFill" v-on:click="preview(filepath)" >{{filepath}}</image>

<view class="del" @tap="deleleImg(index)">x</view>

</view>

<view style="position: absolute;top: -999999px;">

<canvas :style="{width:w,height: h}"  canvas-id="firstCanvas" id="firstCanvas"></canvas>

</view>

</view>

</template>

<style>

</style>

<script>

export default {

data() {

return {

w:'1980px',

h:'2340px',

filesArray: []

}

},

methods: {

preview(filepath){

(filepath)

({

urls:filepath,

current:0

})

},

add() {

({

count: 1,

sizeType: ['original', "compressed"],

sourceType: ['album', 'camera'],

success: (res => {

let array=[];

({

src: [0],

success: function(image) {

/*读取成功进行cavens绘图*/

this.w = + 'px'

this.h = + 'px'

const ctx = ('firstCanvas')

([0], 0, 0, , )

(60)

('#FFFFFF')

(new Date(), 20, 80)

(false, () => {

({

x: 0,

y: 0,

width: ,

height: ,

destWidth: ,

destHeight: ,

canvasId: 'firstCanvas',

success:function(res){

({

filePath:,

success: function () {

({

title: '标题',

duration: 2000

});

}

});

()

}

})

})

}

});

(array)

})

})

},

deleleImg(index) {

({

title: '提示',

content: "确定要删除此项吗?",

success: res => {

if () {

(index, 1);

}

}

})

},

upload(){

}

}

}

</script>