uniappcanvas海报-uni-app添加水印,并且实现循环展示
发布网友
发布时间：2023-07-09 10:28
共1个回答
热心网友
时间：2023-10-10 03:03
能。在应用《uniapp》使用方法中了解到该应用上的canvas是能连续绘制的,需要使用工具进行,该应用是一个使用vue的语法+微信小程序的标签和API的跨平台前端框架。
uniapp加图片水印示例1.需要先在view中增加一个canvas
2.这里的两个参数只需要关注第一个path就行了,为相册选择的图片地址或者拍照得到的图片地址
3._this的声明
4.效果图
uni-app添加水印，并且实现循环展示<template>
<view>
<button@tap="add">增加</button>
<viewclass="file"v-if=">0"v-for="(filepath,index)infilesArray":key="index">
<image:src=filepath[0]mode="scaleToFill"v-on:click="preview(filepath)">{{filepath}}</image>
<viewclass="del"@tap="deleleImg(index)">x</view>
</view>
<viewstyle="position:absolute;top:-999999px;">
<canvas:style="{width:w,height:h}"_anvas-id="firstCanvas"id="firstCanvas"></canvas>
</view>
</view>
</template>
<style>
</style>
<script>
exportdefault{
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=>{
letarray=[];
({
src:[0],
success:function(image){
/*读取成功进行cavens绘图*/
this.w=+'px'
this.h=+'px'
constctx=('firstCanvas')
([0],0,0,,)
(60)
('#FFFFFF')
(newDate(),20,80)
(false,()=>{
({
x:0,
y:0,
width:,
height:,
destWidth:,
destHeight:,
canvasId:'firstCanvas',
success:function(res){
({
filePath:,
success:function(){
({
title:'标题',
ration:2000
});
}
});
()
}
})
})
}
});
(array)
})
})
},
deleleImg(index){
({
title:'提示',
content:"确定要删除此项吗?",
success:res=>{
if(){
(index,1);
}
}
})
},
upload(){
}
}
}
</script>
