微信小程序–上传图片加水印

wxml

<canvas class='canvas' canvas-id="firstCanvas"></canvas>

css

.canvas{border: 2rpx solid pink;background: pink;width: 100%;height: 100%;
}

js

 //选择图片待上传ChooseImage() {var _this = thiswx.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res) => {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;this.setData({uploadimgcount: tempFilePaths.length,alreadyUploadSuccessCount: 0});for (let item of tempFilePaths) {console.log(item)let file = {reportFileName: "",localUrl: item,reportFile: ""}this.uploadimg(item);}if (this.data.imgList.length != 0) {this.setData({imgList: this.data.imgList.concat(res.tempFilePaths)})} else {this.setData({imgList: res.tempFilePaths})}_this.watermark();}});},//加水印watermark() {let _this = this//获取图片详细信息for (let item of this.data.imgList) {wx.getImageInfo({src: item,success: (ress) => {console.log("获取图片详情", item)console.log("获取详情成功", ress)let date = util.formatTime(new Date());let ctx = wx.createCanvasContext('firstCanvas')_this.setData({canvasHeight: ress.height,canvasWidth: ress.width})//将图片src放到cancas内，宽高为图片大小ctx.drawImage(item, 0, 0, 56, 56)//将声明的时间放入canvasctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效ctx.setFillStyle('grey')ctx.fillText("运联快车", 0, 30)ctx.strokeText("运联快车", 0, 30)ctx.draw(false, function () {wx.canvasToTempFilePath({canvasId: 'firstCanvas',success: (res) => {console.log(res.tempFilePath);_this.uploadimg(res.tempFilePath);},fail: (e) => {console.log(e)}})})}})}},//上传图片uploadimg(localUrl) {wx.showLoading({title: "正在上传图片",mask: true})util.putFile(localUrl).then(res => {if (res.statusCode == 200) {wx.hideLoading();let count = this.data.alreadyUploadSuccessCount;count = count + 1;this.setData({alreadyUploadSuccessCount: count});if (count == this.data.uploadimgcount) {wx.showToast({title: '图片上传成功',icon: 'success',duration: 1000})}if (JSON.parse(res.data).code == 200) {// console.log(111111111,JSON.parse(res.data).data)let uploadObj = JSON.parse(res.data).data;let arr = []arr.push(uploadObj)this.setData({uploadList: this.data.uploadList.concat(arr)})wx.hideLoading();// console.log("uploadList",this.data.uploadList)}}})},

微信小程序--上传图片加水印相关推荐

微信小程序背景加水印简单版
小程序页面增加水印效果因为所有页面都要加水印,所以肯定是要用自定义组件实现. 思考路程第一种最开始考虑的是canvas生成图片,转换成base64做一张背景图,然后才了解到水印不能直接在元素上 ...
微信小程序拍照加水印
根据上次 1.wxml代码: 因为拍照要到指定位置显示,这里的canvas我想隐藏,就用了css:position:fixed;left: 10000rpx.之前尝试过hidden='true'或者d ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...

微信小程序--上传图片加水印

微信小程序–上传图片加水印

wxml

css

js

微信小程序--上传图片加水印相关推荐

最新文章

热门文章