900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 小程序调取相机照片添加水印(时间水印)

小程序调取相机照片添加水印(时间水印)

时间:2024-04-05 04:24:12

相关推荐

小程序调取相机照片添加水印(时间水印)

下面的代码主要就是你在小程序调用了相机或者相册后,在返回的照片上添加水印。

WXML

<view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;"><canvas canvas-id="firstCanvas" class="canvas" style="width: {{w}}px;height: {{h}}px;"></canvas></view>

JS

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+':' +second//创建canvasconst ctx = wx.createCanvasContext('firstCanvas');ctx.drawImage(res.path, 0, 0, width, height); //先画出图片//将声明的时间放入canvasctx.setFontSize(24) //注意:设置文字大小必须放在填充文字之前,否则不生效ctx.setFillStyle('black');ctx.fillText(roleNameInfo, 60, height - 60);ctx.draw(false, function () {setTimeout(function(){//绘画完成回调//生成图片wx.canvasToTempFilePath({quality: 1,fileType: 'jpg',canvasId: 'firstCanvas',success: function (ress) {console.log(ress)wx.uploadFile({//将带有水印的图片上传到服务器url: app.globalData.site.webSite + '/api/v1/file/stream',filePath: ress.tempFilePath,name: 'file',success(_res) {let data = JSON.parse(_res.data);if (data.success) {console.log(data.data)wx.hideLoading();that.setData({storesPhoto: data.data})}}})wx.saveImageToPhotosAlbum({//将带有水印的图片保存到相册里filePath: ress.tempFilePath,success(resp) {}})console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径}})},600)})}})}})},

这个因为我们的要求只加了时间,大家还想添加什么东西都可以在canvas里面画出来。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。