微信小程序上传照片加水印

 上传水印用的是canvas做的

canvas 我选用的网址：阿里云：https://help.aliyun.com/document_detail/188957.html；菜鸟教程：https://www.runoob.com/html/html5-canvas.html；w3c：https://www.w3school.com.cn/html/html5_canvas.asp；

三种方式差不多的文档，你看着哪个舒服方便理解就用哪个，我用的是菜鸟教程的
然后我是上传功能中添加的水印，加的时间地点，时间我取得时间戳，地点我是固定死的，你们有需要的也可以用变量去使用
在wxml中：


<view class="weui-uploader" ><view class="img-v weui-uploader__bd"><view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this" style=""><image class="upImgIcon" src="{{item}}" data-index="{{index}}" mode="aspectFill"  bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon></image></view><!-- 用来提示用户上传图片 --><image class="upImgIcon" id="{{3}}"  bindtap="Photograph"  src="../../../images/business/icon-tp@2x.png" alt="" /></view>
</view><view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;"><canvas canvas-id="firstCanvas" style="border:1px solid #000000;" class="canvas" style="width: {{w}}px;height: {{h}}px;"></canvas>
</view>

在js中：

// pages/try/upload/upload.jsPage({/*** 页面的初始数据*/data: {imgs: [],socketOpen: false,src:'',canvasStyle:{}},Photograph(){ //点击拍照的方法let that = thiswx.chooseImage({count: 1,//允许的上传总数quality: 'high',//图片质量sizeType: ['compressed'],sourceType: ['camera'],//支持相机和相册success: function(res) {console.log(res.tempFilePaths[0])wx.showLoading({title: "正在加载图片",mask: true})//获取原图片信息wx.getImageInfo({src: res.tempFilePaths[0],success: function (res) {console.log(res)var width = res.width, height = res.height;that.setData({//设定画布的宽高w: width,h: height})//获取当前时间let newDate = new Date();let year = newDate.getFullYear() //年let month = newDate.getMonth() + 1 //月let day = newDate.getDate() //日var hour = newDate.getHours()var minute = newDate.getMinutes()var second = newDate.getSeconds()let roleNameInfo = '拍摄时间：' + year + '年' + month + '月' + day + '日 '+hour+':'+minute+':' +secondlet address = '安徽省安庆市望江县'//创建canvasconst ctx = wx.createCanvasContext('firstCanvas');ctx.drawImage(res.path, 0, 0, width, height); //先画出图片//将声明的时间放入canvasctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效ctx.setFillStyle('red');ctx.fillText(roleNameInfo, 80, height - 60);ctx.fillText(address, 80, height - 20);ctx.draw(false, function () {setTimeout(function(){//绘画完成回调//生成图片wx.canvasToTempFilePath({quality: 1,fileType: 'jpg',canvasId: 'firstCanvas',success: function (ress) {wx.hideLoading();let imgs = that.data.imgsimgs.push(ress.tempFilePath)that.setData({imgs: imgs})console.log('imgs',that.data.imgs)console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径}})},600)})}})}})},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;console.log(imgs[index].tempFilePath)wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},})

以上是所有的代码了，有提问我们可以一起学习，刚进入这个行业，还在摸爬滚打中。

微信小程序上传照片加水印相关推荐

《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序上传后进行性手机扫码阅览发现白屏的解决
目录问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...

微信小程序上传照片加水印

微信小程序上传照片加水印

canvas 我选用的网址：阿里云：https://help.aliyun.com/document_detail/188957.html；菜鸟教程：https://www.runoob.com/html/html5-canvas.html；w3c：https://www.w3school.com.cn/html/html5_canvas.asp；

微信小程序上传照片加水印相关推荐

最新文章

热门文章