微信小程序拍照加水印
根据上次
1.wxml代码: 因为拍照要到指定位置显示,这里的canvas我想隐藏,就用了css:position:fixed;left: 10000rpx。之前尝试过hidden=‘true’或者display: block;,发现没有渲染成功,最后只能靠css样子控制了。
<canvas style="width: {{thumbWidth}}px; height: {{thumbHeight}}px; position:fixed;left: 10000rpx" canvas-id="firstCanvas"></canvas>
2.js部分:
ChooseImage() {let that = thiswx.chooseImage({count: 4, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album','camera'], //从相册选图 、使用相机success: (res) => {that.compress( res.tempFilePaths[0])}});},compress(file) { //接收传过来的图片var that = this;//获取原图片信息wx.getImageInfo({src: file,success: function (res) {wx.showLoading({title: "正在加载图片",mask: true})var maxWidth = 220, maxHeight = falsevar width = res.width, height = res.height;if (width > maxWidth) {//超出限制宽度height = (maxWidth / width) * height;width = parseInt(maxWidth);}if (res.height > maxHeight && maxHeight) {//超出限制高度var ratio = that.data.thumbHeight / res.height;//计算比例width = (maxHeight / height) * width.toFixed(2);height = maxHeight.toFixed(2);}var width = res.width, height = res.height;that.setData({ thumbWidth: width, thumbHeight: height }); //设定画布的宽高//显示的内容和时间,可按自己需求改let text = "湖北武汉市光谷软件园 : ";let time = App.formatTime(new Date());//按比例压缩图片const ctx = wx.createCanvasContext('firstCanvas');ctx.drawImage(file, 0, 0, width, height); //先画出图片//将声明的时间放入canvasctx.setFontSize(30) //注意:设置文字大小必须放在填充文字之前,否则不生效ctx.setFillStyle('white');ctx.fillText(text, 10, height - 72);ctx.setFontSize(26);ctx.fillText(time, 10, height - 35);ctx.draw(false, function () {setTimeout(function(){//绘画完成回调//生成图片wx.canvasToTempFilePath({canvasId: 'firstCanvas',success: function (ress) {wx.hideLoading();wx.saveImageToPhotosAlbum({ //将带有水印的图片保存到相册里filePath: ress.tempFilePath,success(resp) {}})console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径//调用自己的上传方法that.UploadFile(ress.tempFilePath)}})},600)})}})
}
微信小程序拍照加水印相关推荐
- 微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
- 微信小程序背景加水印 简单版
小程序页面增加水印 效果 因为所有页面都要加水印,所以肯定是要用自定义组件实现. 思考路程 第一种 最开始考虑的是canvas生成图片,转换成base64做一张背景图,然后才了解到水印不能直接在元素上 ...
- android 摄像头 蓝条,微信小程序拍照部分Android机出现蓝色精灵人现象
问题类型: BUG 问题描述:微信小程序拍照部分Android机出现蓝色精灵人现象,具体为OPPO R9S系统版本为Android6.0.1,华为P9 系统版本问题Android7.0,小米Note3 ...
- 微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据?
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
- 微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多 组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
- 微信小程序 拍照打卡功能实现
微信小程序 拍照打卡功能实现 附Java代码 小程序端 签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台 保存照片 保存打卡数据 由于拍照组件是相当于一个块,用隐藏显示的方 ...
- 微信小程序分包加载,分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
- 微信小程序,Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试?微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
最新文章
- 98后常春藤学霸林之秋,一作拿下CVPR最佳论文提名,首次挑战图片翻转不变性假设...
- gvim 二进制_vim/gvim学习
- Docker安装部署MongoDB及MySql和MongoDB的语法对比
- K8S 基本架构与常用术语
- Go笔试题目Go与PHP分别实现方法
- 谁能够在萧条中生存?历史总是惊人相似的(转)
- 什么甜食可以代表你的家乡?
- JVM内存管理------GC算法精解(五分钟教你终极算法---分代搜集算法)
- 一步步编写操作系统 71 直接操作显卡,编写自己的打印函数71-74
- Python演示SQLite数据库系统表sqlite_sequence的作用与操作
- 小学期实践心得(2)
- pdf png 转换超清
- discuz!net 的使用
- 全电子计算机联锁厂家,传统计算机联锁与全电子计算机联锁对比分析
- 蓝桥杯 算法训练 寂寞的数(c语言版详细注释)
- 台式计算机如何定时关机,台式电脑如何设置每天定时关机
- 【LE AUDIO】LC3 - Low Complexity Communication Codec
- JAVA游戏 混乱大枪战
- 广东python编程比赛
- 【MySQL进阶】存储过程及存储函数
热门文章
- hi3559av100/hi3519av100/hi3516dv300/hi3516cv500
- Pulsar IO 简介
- 中国工程院院士、北京清华长庚医院执行院长董家鸿正式接受聘请,成为数据科学研究院RONG教授...
- 串口助手是怎么做出来的 :第二节,串口助手功能的实现及验证
- 励志名言短句霸气【古诗词版】
- 苹果iPhone 4正式上市首日供不应求
- 2021年11月中国乘用车品牌出口量排行榜:MGZS出口量突破2万辆,Top前五中有3个品牌归属上海股份(附月榜TOP150详单)
- java手机号简单加密方法
- C语言模拟实现memcpy函数
- Open /sys/bus/pci/devices/0000:01:00.0/driver/unbind failed. err 13 (Permission denied)