开源原创智能水印相机微信小程序
最近更新 2023年10月27日
资源编号 25171

#热门
开源原创智能水印相机微信小程序

郑重承诺丨静鱼客栈提供安全交易、信息保真!
增值服务:
技术支持
安装指导
环境配置
远程安装
模板修改
¥ 6.6U点

VIP免费升级VIP

小道消息:支付宝搜索 838329395 领取超大红包 可直接抵扣!
立即下载 升级贵宾 问题悬赏 社区大厅
详情介绍
请勿商业运营,违法使用和传播!资源仅供研究学习使用!解压密码为:www.52jyu.cn

前言

一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。

原理

主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取到位置信息,然后利用JS获取本地时间,最后绘制到canvas上通过canvasToTempFilePath生成图片。

获取位置信息

这个接口在去年开始就需要用户手动申请,在小程序管理页面申请,如果申请按钮无法点击,在提交代码时会弹窗申请弹窗,之后就可以申请了。通过后才可以上线小程序。代码如下:

/**
 * 获取地址信息
*/
    getLocation: function () {
        wx.getLocation({
            success: res => {
                qqmapsdk.reverseGeocoder({
                    location: {
                        latitude: res.latitude,
                        longitude: res.longitude
                    },
                    success: res => {
                        let address = res.result.address;
                        this.setData({
                            address
                        })
                    }
                })
            }
        })
    },

    /**
     * 手动选择地点
     */
    chooseLocation: function () {
        wx.chooseLocation({
            success: res => {
                console.log(res)
                this.setData({
                    address: res.address
                })
            },
            fail: err => {
                console.log(err)
            }
        })
    }

其中qqmapsdk使用的是腾讯位置服务的sdk,需要去官方下载并申请key,然后再页面中加上如下代码:


var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
    key: '' // 这里填写你的key
});

获取时间信息

时间信息就很简单了,这里给大家提供封装了一下,如下代码:


export const formatTime = () => {
    const date = new Date();
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    return {
        date: [year, month, day].map(formatNumber).join('-'),
        time:[hour, minute, second].map(formatNumber).join(':'),
        week: '星期'+weekDay
    }
}

const formatNumber = (n) => {
    const s = n.toString()
    return s[1] ? s : '0' + s
}

绘制图片
这里说明一下,目前 wx.createCanvasContext接口以及弃用了,所以我们采用Canvas.getContext代替,首先我们需要添加canvas,在wxml页面中添加如下代码,一定要设置好宽高,可以是动态的,但是必须设定好,不然很容易出现画面模糊的问题。

<canvas type="2d" id="canvas" style="position: fixed; top: -10000px; left: -10000px; width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>

然后动态设置宽高可以根据相机或者图片的宽高自定设置,然后我们将时间、位置和图片等信息一起绘制在canvas上。


/**
     * 给图片添加水印
     */
    addWatermark: function (imageUrl) {
        console.log(imageUrl)
        return new Promise((resolve, reject) => {
            wx.showLoading({
                title: '图片生成中...',
            })
            const query = wx.createSelectorQuery();
            query.select('#canvas').fields({
                node: true,
                size: true
            }).exec((res) => {
                console.log(res)
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');

                const dpr = wx.getSystemInfoSync().pixelRatio;
                const {
                    canvasWidth,
                    canvasHeight
                } = this.data;
                canvas.width = canvasWidth * 1.5
                canvas.height = canvasHeight * 1.5
                ctx.scale(1.5, 1.5)

                // 绘制背景图片
                const image = canvas.createImage();
                image.onload = () => {
                    ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);

                    ctx.font = 'normal 28px null';
                    ctx.fillStyle = '#ffffff';
                    ctx.textBaseline = 'bottom';

                    // 绘制地址
                    ctx.fillText(this.data.address, 20, canvasHeight - 20);

                    // 绘制时间
                    ctx.fillText(this.data.date + ' ' + this.data.time, 20, canvasHeight - 65);

                    // 绘制星期
                    ctx.fillText(this.data.week, 20, canvasHeight - 115);


                    wx.canvasToTempFilePath({
                        canvas,
                        success: (res) => {
                            wx.hideLoading()
                            resolve(res.tempFilePath);
                        },
                        fail: () => {
                            wx.hideLoading()
                            reject(new Error('转换为图片失败'));
                        }
                    });
                }
                image.src = imageUrl;
            });
        });
    },


这里直接用Promise封装了一下,方便调用。其中iamgeUrl为相机的照片或者用户自己上传的图片地址。

以上就是大致的流程,具体如何操作,可以看我开源的智能水印相机的代码:开源原创智能水印相机微信小程序

资源下载此资源下载价格为6.6U点点击检测网盘有效后购买,VIP免费
客服QQ:305582964 联系邮箱:305582964@qq.com
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有U点奖励和额外收入!

静鱼客栈 APP/小程序/源码 开源原创智能水印相机微信小程序 https://www.52jyu.cn/25171.html

静鱼客栈的帅逼站长~

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP贵宾介绍。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器没有下载完整造成的,可以重新进行下载即可~
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
静鱼客栈-站长

为您解决烦忧 - 专业服务 看到消息会进行回复