整个canvas玩一玩，做一个简单的水印相机小程序

体验地址

前言

核心js代码粘在下面了，需要的宝贝可以看看思路，末尾会有一个源码地址，后期应该还会更新一些功能，比如说图片的裁剪合并，现在九宫格切割已经做好了（只是还有些bug…）

一、知识点介绍

1、小程序camera组件

camera详细介绍

2、腾讯位置微信sdk

解析当前位置，需要获取附近位置

3、微信小程序Canvas相关API（就不多说了）

咱就是啥也不说，先看看看效果吧，这个是开发工具调试界面，显示不了图片

还可以自定义位置哦

相机界面的代码，这里主要是用到了一个，切换前置摄像头跟后置摄像头，如果需要加上，修改闪光灯的话可以直接修改flash属性就行。

<camera wx:if="{{!src}}" device-position="{{position}}" flash="off" binderror="error" style="width: {{screenWidth}}px; height: 500px;"></camera>

二、拍照添加水印（核心部分）

主要思路就是，首先拿到图片的长宽，给到界面canvas上（我这里是固定值），然后可以做一些缩放，我这相机宽度是获取的屏幕宽度，高度固定五百，如需调整，自行优化一下，拍照之后将图片绘制到canvas上（CanvasContext.drawImage），最后添加水（将文字填充到canvas上），最后生成图片wx.canvasToTempFilePath

这里时间的话还有需要优化的地方，我是使用的本地时间，最好是使用远程服务器时间，才可以避免被本地修改，时间伪造。就没那味了~~~

let ctx = wx.createCanvasContext('firstCanvas')
ctx.drawImage(res.tempImagePath, 0, 0, that.data.screenWidth, 500) //五百和界面相机高度一致
ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle('white')
ctx.fillText(that.data.addressInfo.address, 20, 480)

takePhoto() { //拍照let that = thisthis.ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath,isPhoto: false,})wx.getImageInfo({ //获取照片宽高src: res.tempImagePath,success: (ress) => {let ctx = wx.createCanvasContext('firstCanvas')that.setData({canvasHeight: ress.height,canvasWidth: ress.width})//将图片src放到cancas内，宽高为图片大小ctx.drawImage(res.tempImagePath, 0, 0, that.data.screenWidth, 500) //五百和界面相机高度一致ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效ctx.setFillStyle('white')ctx.fillText(that.data.addressInfo.address, 20, 480)ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效ctx.setFillStyle('white')ctx.fillText(that.data.nowTime, 20, 450)ctx.draw(false, function () {wx.canvasToTempFilePath({canvasId: 'firstCanvas',fileType: 'jpg',quality: 1,success: (res1) => {console.log(res1)that.setData({src: res1.tempFilePath})},fail: (e) => {console.log(e)}})})}})}})
},

所以到这里了，哥哥们还是点个赞再走吧，仓库地址小弟给你们放下边了。

仓库地址：https://github.com/codernmx/mark-canvas

整个canvas玩一玩，做一个简单的水印相机小程序相关推荐

用c++做一个简单的打飞机小游戏（详细说明与注释）
用c++做一个简单的打飞机小游戏(详细说明与注释) 说明: 代码长度5k多,行数200多行. 不仅没有压行,反而为了条理清晰一点所以很多中间加空换行,把很多可以写在一起的分割成了几个函数. 为了不会忘 ...
利用Python做一个简单的对战小游戏
利用Python做一个简单的文字对战小游戏一.游戏介绍 1.大体介绍:文字版的对战小游戏,可以利用Python随机生成两个角色,角色带有各自的血量和攻击值两个指标.两人在对战时同时攻击对方,同时造成 ...
一个程序如何连接到外网_如何开发制作小程序？做一个电商带直播小程序
开发制作小程序可以让商家更方便地引流获客.增加线上订单.尤其是今年小程序直播大火,商家有了新的运营私域流量的利器,因此做一个电商带直播功能的小程序是很有用的. 如何开发一个这样的小程序呢?流程如下: ...
沐风：做一个会自动赚钱的小程序
当下互联网最火的莫过于小程序了,小程序具有很多天生的优势: 一.扎根于微信生态,拥微信10亿级的海量用户可挖掘. 二.用户界面和流畅度体验,可媲美原生APP. 三.开发周期短,成本低,成本相对原生AP ...
如何做一个基于微信失物招领小程序毕业设计毕设作品
分析架构我们开发系统,常规有两个架构,一个BS架构(浏览器/服务器模式),一个CS(客户端/服务器端模式):我们微信小程序项目属于CS架构,C客户端是我们要开发的小程序,S端是我们要开发的后台管理系 ...
使用Python做一个切换电脑桌面壁纸的小程序
文章目录一.前言二.原理三.软件下载地址一.前言免费的壁纸软件竟有许多广告,影响自己体验? 那就使用python自己制作一个小软件满足自己的需求! 在IDE中运行效果软件实现的效果效果是 ...
如何做一个基于微信求职招聘小程序毕业设计毕设作品
分析架构我们开发系统,常规有两个架构,一个BS架构(浏览器/服务器模式),一个CS(客户端/服务器端模式):我们微信小程序项目属于CS架构,C客户端是我们要开发的小程序,S端是我们要开发的后台管理系 ...
微信小程序傻瓜制作_傻瓜式教程：做一个带优惠券的微信小程序
优惠券一直是电商零售商家们常用的营销手段之一,如今在各种微信小程序商城中,我们也常常能见到优惠券.为什么商家这么喜欢使用优惠券呢?当然是因为它确实能有效地刺激客户消费.商家发放优惠券,利用一种对比效应 ...
一个简单的留言微信小程序
简易留言微信小程序该小程序旨在熟悉小程序的页面写法,熟悉小程序的构成,掌握数据库的操作等等. 来了. 前言,一个小程序,如果需要和用户互动,就必定要获取用户授权,所以授权的操作这里省略, 我们只关注 ...

整个canvas玩一玩，做一个简单的水印相机小程序

目录

体验地址

前言

一、知识点介绍

1、小程序camera组件

2、腾讯位置微信sdk

3、微信小程序Canvas相关API（就不多说了）

二、拍照添加水印（核心部分）

整个canvas玩一玩，做一个简单的水印相机小程序相关推荐

最新文章

热门文章