<template>
<view>
<button @tap="add">增加</button>
<view class="file" v-if="filepath.length>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){
console.log(filepath)
uni.previewImage({
urls:filepath,
current:0
})
},
add() {
uni.chooseImage({
count: 1,
sizeType: ['original', "compressed"],
sourceType: ['album', 'camera'],
success: (res => {
let array=[];
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function(image) {
/*读取成功进行cavens绘图*/
this.w = image.width + 'px'
this.h = image.height + 'px'
const ctx = uni.createCanvasContext('firstCanvas')
ctx.drawImage(res.tempFilePaths[0], 0, 0, image.width, image.height)
ctx.setFontSize(60)
ctx.setFillStyle('#FFFFFF')
ctx.fillText(new Date(), 20, 80)
ctx.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: image.width,
height: image.width,
destWidth: image.width,
destHeight: image.width,
canvasId: 'firstCanvas',
success:function(res){
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: function () {
uni.showToast({
title: '标题',
duration: 2000
});
}
});
array.push(res.tempFilePath)
}
})
})
}
});
this.filesArray.push(array)
})
})
},
deleleImg(index) {
uni.showModal({
title: '提示',
content: "确定要删除此项吗?",
success: res => {
if (res.confirm) {
this.filesArray.splice(index, 1);
}
}
})
},
upload(){
}
}
}
</script>
