uniApp图片加水印

这个代码直接拿走运行没啥大问题，但是，建议开发的时候，如果遇到加水印，别多选图片，没找到什么原因，就是绘制的不理想，一张一张来，可以

<template><view class="content"><view v-for="(photo,index) in photoData" :key="index" class="photo"><image :src="photo"  @click="previewPhoto(photo,photoData)"></image><view class="closeA" @tap="deletePhoto(index)">&times;</view></view><view class="btnAddPhoto" @click="btnAddPhoto">+</view><canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" ></canvas></view>
</template><script>export default {data() {return {photoData:[],photoArray:[],canvasWidth:'',canvasHeight:'',photoIndex:0}},onLoad() {},methods: {// 添加图片事件btnAddPhoto(){this.photoIndex=0;let ctx=uni.createCanvasContext('myCanvas');uni.chooseImage({count:6,sourceType:['album','camera'],success:res=>{this.photoArray=res.tempFilePaths;uni.showLoading({title:"图片加载中..."})this.callAddWaterMart();}})},// 调用添加水印的函数callAddWaterMart(){this.addWaterMark(()=>{if(this.photoIndex < this.photoArray.length-1){this.photoIndex++;this.callAddWaterMart()}else{uni.hideLoading()}})},// 添加水印addWaterMark(callback){uni.getImageInfo({src:this.photoArray[this.photoIndex],success:res=>{this.canvasWidth=`${res.width}px`;this.canvasHeight=`${res.height}px`;var ctx=uni.createCanvasContext('myCanvas');ctx.clearRect(0,0,res.width,res.height);ctx.beginPath();ctx.drawImage(this.photoArray[this.photoIndex],0,0,res.width,res.height);// 为图片添加水印ctx.translate(res.width/2,res.height/2);ctx.rotate(45 * Math.PI / 180);let horizontal=res.width/4;let vertical=res.height/3;                     for(let i=0;i<=3;i++){for(let j=0;j<=3;j++){ctx.beginPath();ctx.setFontSize(40);ctx.setFillStyle("rgba(255,255,255,0.4)");ctx.fillText("--晒渔--",i*horizontal-res.width/2,j*vertical-res.height/2);}}// 开始绘制添加水印的图片并显示在页面中ctx.draw(false,()=>{                         setTimeout(()=>{console.log("asdf");uni.canvasToTempFilePath({canvasId:"myCanvas",success:res=>{console.log(res.tempFilePath)this.photoData.push(res.tempFilePath);callback();}})},500)});  }})},// 预览图片previewPhoto(url,list){uni.previewImage({current:url,urls:list.map(item=>item)})},// 删除图片deletePhoto(index){this.photoArray.splice(index,1);this.photoData.splice(index,1);console.log(this.photoArray)}}}
</script><style>.content{padding:20upx;}.photo,.photo image{display: inline-block;width:220upx; height: 220upx;}.btnAddPhoto{width:220upx; height: 220upx;border:dashed 1px #aaa;display: flex;justify-content: center;align-items: center;font-size: 50upx;}canvas{border:solid 1px gray;position:absolute;left:5000upx;}
</style>

uniApp图片加水印相关推荐

uni-app图片加水印；小程序图片添加水印；使用canvas上传图片加水印
原博主:点击查看需求: 微信小程序,上传图片,成功后图片有水印,既图片的网络地址也有水印. 上传图片使用uni-app的uni.chooseImage()方法,水印是用canvas. 以下代码可以直 ...
（uniapp）h5图片加水印
写一个uniapp图片加水印,限于h5,当然小程序和App也是可以的,只是返回的不一样,这里是可以在H5用的,然后可以拿到加完水印的图片,废话不多说: 第一步拿到你要加水印的图片地址,先用canvas ...
golang实现给图片加水印
2019独角兽企业重金招聘Python工程师标准>>> 最近跟在写golang图片加水印的方法,这里用的是一些基本的功能. package mainimport ("fmt ...
php加水印功能,PHP图片加水印功能
本篇文章主要介绍PHP图片加水印功能,感兴趣的朋友参考下,希望对大家有所帮助. 实例代码如下:<?php /** * 功能:给一张图片加上水印效果 * $i 要加水印效果的图片 * $t 水印文 ...
Java图片处理（二）图片加水印
图片加水印,是通过图片重叠绘制实现的.实现代码如下: public static void press(String pressImg, String pressText, String target ...
C# 图片加水印例程
using System; using System.IO; using System.Collections; using System.Drawing; using System.Drawing. ...
Python脚本实现图片加水印
起步图片是指由图形.图像等构成的平面媒体,有形式的事物,我们看到的,是图画.照片.拓片等的统称. 为了保护一些原创图片的版权,某些时候我们需要在图片上面,加上水印,当然你可以用Photoshop来做 ...
java 水印位置_Java实现图片加水印且控制位置和透明度
Java实现图片加水印且控制位置和透明度昨天要做一个给图片加水印的功能,不想使用一些插件,就在网上转了一会儿,经过改装成了我需要的功能,代码如下: package org.guhao; import ...
如何给图片加水印？这三个图片加水印方法，帮你添加花式水印
大家有没有这样情况,自己好不容易做好的作品发布到网络平台上结果被他人盗用了,很让人气愤,那我们应该如何避免这种情况呢? 其实我们可以给自己的作品加上一些专属的个性化水印,那小伙伴们知道图片加水印怎么操 ...

uniApp图片加水印

这个代码直接拿走运行没啥大问题，但是，建议开发的时候，如果遇到加水印，别多选图片，没找到什么原因，就是绘制的不理想，一张一张来，可以

uniApp图片加水印相关推荐

最新文章

热门文章