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

Posted 2023-04-23

参考技术A <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>

为界面添加水印 ---添加到View上，添加到cell上

        需求： 在某个视图中添加对应的水印，和在某个tableView中给每一行均添加水印，并且水印均是动态生成的，以当前用户名作为水印的提示文字。

       针对上述需求，即给视图添加一个水印，这个水印也不是固定的图片而是针对不同的用户展示不同的水印提示文字。则实现方法可以是绘制一张图片，并且这张图片的内容是由用户的名字填充。如果是给整个View添加水印，则直接将该图片加载到View上。如果是在每一个tableView上添加水印而且水印要跟随着界面的滑动而滑动，这就需要将水印视图添加到cell上。但是每一张图对应的应该是从生成的大图里面截取的对应的Image的一部分。

       上述思路列清楚之后就可以开始写代码了，先给UIImage 写一个分类，绘制一个图片，然后将用户的名字作为参数传入生成对应的水印图。不过在绘制图片的时候遇到了一个小问题，也就是这次写下来的目的，一开始绘制图片和截取图片都采用的是UIGraphicsBeginImageContext 绘制的图片，截取也是采用- (instancetype)initWithCGImage:(CGImageRef)cgImage; 生成截取的图片，但是，这样生成的水印很不清晰，略模糊吧，然后查了一下，采用UIGraphicsBeginImageContextWithOptions 绘制图片而采用- (instancetype)initWithCGImage:(CGImageRef)cgImage scale:(CGFloat)scale orientation:(UIImageOrientation)orientation 截取图片，这时候生成的图片是十分清晰的，截取时有一点需要注意，传入rect 截取对应的图片要乘以屏幕的比例，因为上述截图是按照像素截取的，也就是一倍图的标准，这时候要乘以相应的屏幕比例 [UIScreen mainScreen].scale 才能截取正常。

     相关水印代码已上传git，如需下载请给个star，谢谢~~