小程序调取相机照片添加水印（时间水印）

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

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里面画出来。

小程序调取相机照片添加水印（时间水印）相关推荐

微信小程序调用相机选择图片生成水印
项目近期有一个需求,是在小程序使用相机拍照时,页面缩略图和上传服务器(或保存本地)的都是带水印的,水印文案是当前的时间和当前所处的地点. 前期使用了微信小程序的wx.chooseImage相机拍照,再 ...
微信小程序开发--添加照片水印（canvas ）
前言:当你在微信小程序中制作照片时,你可能需要添加水印,以便在分享时保护你的照片,并标识出你的品牌或网站.本文将介绍如何在微信小程序中添加照片水印. 最近接到个需求: 效果图: 我的环境: 系统:Wi ...
db2时间格式化为时间到时分秒_快捷指令为 iPhone 手机照片添加时间水印
安卓手机用户,自带的相机一般都有花样繁多的水印功能,可以将当前使用的手机型号.日期时间.品牌等信息以水印形式添加到照片.而苹果手机自带的相机应用可设置的功能较少,不过,苹果系统自带的"快捷指 ...
uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
微信小程序—自定义相机
小程序自定义相机?其实有些名不副实,因为小程序给提供的接口简单到不能再简单,不给你丝毫修改的机会,能做的不过是在相机上覆盖cover-view.cover-image.canvas之类的,来提升相机的 ...
uniapp微信小程序自定义相机，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题
微信小程序自定义相机效果文章目录微信小程序自定义相机效果需求一.小程序自定义相机 1.使用uniapp的camera组件二.使用cover-view,cover-image加辅助边框三 ...
微信小程序调取云函数信息推送失败response out of time limit or subscription is canceled hint的具体解决方法
微信小程序调云函数信息推送失败,提示errcode":45015,"errmsg":"response out of time limit or subsc ...
基于微信小程序实现番茄钟专注时间项目演示【附项目源码+论文说明】
基于微信小程序实现番茄钟专注时间项目演示摘要时间管理是指事先计划和运用一定的技能.方法和事物,以敏感.有效地利用时间完成既定的个人或安排的过程.其中番茄法则是一种先进的时间管理理论与方法,正受到越 ...
小程序日期（日历）时间选择器组件
封装一个小程序日期(日历)时间选择器组件简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...

小程序调取相机照片添加水印（时间水印）

WXML

JS

小程序调取相机照片添加水印（时间水印）相关推荐

最新文章

热门文章