小程序图片加水印实现代码，带效果图

效果图：

本文有核心代码和完整代码，完整代码是上传用户的个人信息到云数据库，包括表单，图片上传，多图上传到云数据库。

实现核心代码

             <view class="mg_bo"><view class="text mg_bot">身份证正面照片：</view><view class="text_">上传自动加水印</view><view class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" wx:if="{{zhengmian}}"><image class="img" src="{{zhengmian}}"></image></view><image wx:else class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" src="/img/zhengmian.jpg"></image></view><canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;visibility:hidden;" canvas-id="myCanvas"></canvas>

  zhengmian_img() {let that = thisvar ctx = wx.createCanvasContext('myCanvas')wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {//获取图片基本信息wx.getImageInfo({src: res.tempFilePaths[0],success: function (res) {var width = res.widthvar height = res.height//获取屏幕宽度let screenWidth = wx.getSystemInfoSync().windowWidth//处理一下图片的宽高的比例if (width >= height) {if (width > screenWidth) {width = screenWidth}height = height / res.width * width} else {if (width > screenWidth) {width = screenWidth}if (height > 400) {height = 400width = res.width / res.height * height} else {height = height / res.width * width}}that.setData({imageWidth: width,imageHeight: height,})ctx.drawImage(res.path, 0, 0, width, height)ctx.rotate(20 * Math.PI / 180)for (let j = 1; j < 12; j++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText('身份证水印', 0, 50 * j)for (let i = 1; i < 12; i++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText("身份证水印", (15 + (14 - 1) * "身份证水印".length) * i, 50 * j)}}ctx.draw(false, () => {//生成图片wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function (res) {console.log("canvas可以生成图片")console.log(res.tempFilePath, 'canvas图片地址');// tempFilePath可以作为img标签的src属性显示图片console.log('选择图片', res)const tempFilePaths = res.tempFilePathwx.cloud.uploadFile({cloudPath: Date.parse(new Date()) + "",filePath: tempFilePaths,success: res => {console.log('上传成功', res)let imgUrl = res.fileIDthat.setData({zhengmian: imgUrl})},fail: err => {console.log('上传失败', err)}})}})})}})}})},

实现完整页面代码：

<form bindsubmit='formsubmit'><view><image class="top" mode="widthFix" src="/img/IMG1.png"></image><view class="info"><view><view class="title">{{page_type?'信息填写':'编辑信息'}}</view><block wx:for="{{list}}" wx:key="idx"><view class="mg_bo"><view class="text">{{item.text}}：<text style="color:red">*</text></view><view class="text_">{{item.text_}}</view><input name="{{item.name}}" value="{{item.value}}" data-title="{{item.text}}" data-type='0'></input></view></block></view><view><view class="title">以下信息对外公开，填写时注意保护身份证号码、住址等隐私信息</view><view class="mg_bo"><view class="text mg_bot">昵称：<text style="color:red">*</text></view><input name="nicheng" value="{{nicheng}}"></input></view><view class="mg_bo"><view class="text mg_bot">单选：<text style="color:red">*</text></view><view class=""><radio-group bindchange="radioChange" class="flexRow "><view wx:for="{{sex_list}}" wx:key="idx" style="margin-right: 40rpx;" class="weui-cell__hd"><radio value="{{item.name}}" checked="true" />{{item.name}}</view></radio-group></view></view><view class="mg_bo"><view class="text mg_bot">封面头像：</view><view class="text_">支持 jpg, png, gif, bmp, psd, tiff 等图片格式</view><view class="img_" bindtap="hande_img" wx:if="{{hande}}"><image class="img" src="{{hande}}"></image></view><view class="img_" bindtap="hande_img" wx:else>+ </view></view><view class="mg_bo"><view class="text mg_bot">生活照片：</view><view class="text_">支持 jpg, png, gif, bmp, psd, tiff 等图片格式(建议上传多张，不要过度美颜哦)</view><view class="img_" bindtap="live_phone" wx:if="{{live_phone.length==0}}">+ </view><block wx:else><view class="img_" bindtap="live_phone" wx:for="{{live_phone}}"><image class="img" src="{{item}}"></image></view></block></view><view class="mg_bo"><view class="text mg_bot">身份证正面照片：</view><view class="text_">上传自动加水印</view><view class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" wx:if="{{zhengmian}}"><image class="img" src="{{zhengmian}}"></image></view><image wx:else class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" src="/img/zhengmian.jpg"></image></view><view class="mg_bo"><view class="text mg_bot">身份证反面照片：</view><view class="text_">上传自动加水印</view><view class="img_ img_2" bindtap="fanmian_img" wx:if="{{fanmian}}"><image class="img" mode="widthFix" src="{{fanmian}}"></image></view><image wx:else class="img_ img_2" mode="widthFix" bindtap="fanmian_img" src="/img/fanmian.jpg"></image></view><view class="mg_bo"><view class="text mg_bot">籍贯：</view><picker mode="region" bindchange="bindRegionChange1" value="{{region1}}"><view class="picker">当前选择：{{region1[0]}}，{{region1[1]}}，{{region1[2]}}</view></picker></view><view class="mg_bo"><view class="text mg_bot">所在地区：<view class="text_">同区域的小伙伴配对成功的概率大哦</view></view><picker mode="region" bindchange="bindRegionChange2" value="{{region2}}"><view class="picker">当前选择：{{region2[0]}}，{{region2[1]}}，{{region2[2]}}</view></picker></view><view class="itemaaaa"><view class="mg_bo flexRow"><view class="text">身高</view><input name="shengao" value="{{shengao}}" class="bt_input"></input><text>cm</text></view><view class="mg_bo flexRow"><view class="text">体重</view><input name="tizhong" value="{{tizhong}}" class="bt_input"></input><text>kg</text></view><view class="mg_bo flexRow"><view class="text">年龄</view><input name="age" value="{{age}}" class="bt_input"></input><text>岁</text></view><view class="mg_bo flexRow"><view class="text">年薪</view><input name="nianxing1" value="{{nianxing1}}" class="bt_input"></input><text class="ganggang">-</text><input name="nianxing2" value="{{nianxing2}}" class="bt_input"></input><text>元</text></view><view class="mg_bo flexRow"><view class="text">家庭成员</view><input name="jtcy" value="{{jtcy}}" class="bt_input bt_input2"></input></view><view class="mg_bo " bindtap="xuli"><view class="text">学历</view><view class="da {{ xuli?'':'col'}}">{{xuli?xuli:'请选择'}}</view></view><view class="mg_bo " bindtap="ziyie"><view class="text">职业</view><view class="da  {{ ziyie?'':'col'}}">{{ziyie?ziyie:'请选择'}}</view></view><view class="mg_bo " bindtap="car"><view class="text">车子</view><view class="da  {{ car?'':'col'}}">{{car?car:'请选择'}}</view></view><view class="mg_bo " bindtap="house"><view class="text">房子</view><view class="da  {{ house?'':'col'}}">{{house?house:'请选择'}}</view></view><view class="mg_bo " bindtap="love"><view class="text">恋爱状态</view><view class="da  {{ love?'':'col'}}">{{love?love:'请选择'}}</view></view><view class="mg_bo"><view><view class="text mg_bot">你是怎么样的人<text style="color:red">*</text></view><view class="text_">让对方对你有个简单的认识</view><view class="text_">日常生活简介、会不会做饭？是不是颜值控？</view><view class="text_">家庭情况、工作简介等等</view><view class="text_">请输入200个字以上</view><textarea name="nssmr" value="{{nssmr}}"></textarea></view></view><view class="mg_bo"><view><view class="text mg_bot">平时的兴趣爱好<text style="color:red">*</text></view><view class="text_">让对方对你有个简单的认识</view><view class="text_">为匹配兴趣相近的小伙伴，请准确填写。可以填写上班时间喜欢做什么，下班时间喜欢做什么，节假日喜欢做什么.....等等</view><view class="text_">请输入200个字以上</view><textarea name="psdah" value="{{psdah}}"></textarea></view></view><view class="mg_bo"><view><view class="text mg_bot">交友宣言</view><input name="jyxy" value="{{jyxy}}"></input></view></view><view class="mg_bo"><view><view class="text mg_bot">你希望的TA是什么样子的？<text style="color:red">*</text></view><textarea name="nxwdt" value="{{nxwdt}}"></textarea></view></view></view></view><button formType="submit">{{page_type?'提交':'下一步'}}</button></view></view>
</form>
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;visibility:hidden;" canvas-id="myCanvas"></canvas>

//index.js
var userInfo;
const DB = wx.cloud.database()
var util = require('../../utils/util.js')let that
// var data{
//   phoneNumber: '手机号码',
//   name: '姓名',
//   userNumber: '身份证号码',
//   wxNumber: '微信帐号',
//   shengao: '身高',
//   tizhong: '体重',
//   nssmr: '你是怎么样的人',
//   psdah: '平时的兴趣爱好',
//   jyxy: '交友宣言',
//   nxwdt: '你希望的TA是什么样子的？',//   nicheng 昵称
//   sex: '性别',
//   region1: '籍贯',
//   region2: '所在地区',
//   xuli: '学历',
//   ziyie: '职业',
//   car: '车子',
//   house: '房子',
//   love: '恋爱状态',
//  jtcy 家庭成员
// nianxing1 年薪
// nianxing2 年薪
// zhengmian  身份证正面
// fanmian_img    身份证反面
// }
Page({data: {page_type: wx.getStorageSync('userInfoDetail') ? false : true,list: [{text: '手机号码',text_: '仅用于登记，不公开',name: 'phoneNumber',value: ""}, {text: '姓名',text_: '仅用于登记，不公开',name: 'name',value: ""}, {text: '身份证号码',text_: '仅作核实身份之用，不公开',name: 'userNumber',value: ""}, {text: '微信帐号',text_: '',name: 'wxNumber',value: ""}],region1: ['请选择', '请选择', '请选择'],region2: ['请选择', '请选择', '请选择'],sex: "男",customItem: '请选择',sex_list: [{name: '男',checked: 'true',},{name: '女',},],hande: "cloud://gezi-ofhmx.6765-gezi-ofhmx-1255880295/1593571997000",arr_list: [],live_phone: [],},onLoad: function (option) {that = thisconsole.log('--------')if (option.nav_type == "login") {this.setData({nav_type: option.nav_type})}try {if (wx.getStorageSync('userInfo')) {var list = this.data.list;var user = wx.getStorageSync('userInfo').userInfoDetail;console.log(list[0].value, user.phoneNumber)if (user.phoneNumber) {list[0].value = user.phoneNumber}if (user.name) list[1].value = user.nameif (user.userNumber) list[2].value = user.userNumberif (user.wxNumber) list[3].value = user.wxNumbervar sex_list = this.data.sex_list;var sex = "男";if (user.age == 1) {sex_list[0].checked = true;sex_list[1].checked = false;sex = "男"} else {sex = "女"sex_list[0].checked = false;sex_list[1].checked = true;}console.log('-----------------', user)this.setData({list,sex_list,sex,user,...user})} else {console.log('===========')}} catch (error) {console.log('====', error)}},hande_img() {let that = thiswx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// tempFilePath可以作为img标签的src属性显示图片console.log('选择图片', res)const tempFilePaths = res.tempFilePaths[0]// 将图片上传至云存储空间wx.cloud.uploadFile({// 指定上传到的云路径cloudPath: Date.parse(new Date()) + tempFilePaths[0],// 指定要上传的文件的小程序临时文件路径filePath: tempFilePaths,// 成功回调success: res => {console.log('上传成功', res)// 成功之后的图片地址let imgUrl = res.fileIDthat.setData({hande: imgUrl})}})}})},zhengmian_img() {let that = thisvar ctx = wx.createCanvasContext('myCanvas')wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {//获取图片基本信息wx.getImageInfo({src: res.tempFilePaths[0],success: function (res) {var width = res.widthvar height = res.height//获取屏幕宽度let screenWidth = wx.getSystemInfoSync().windowWidth//处理一下图片的宽高的比例if (width >= height) {if (width > screenWidth) {width = screenWidth}height = height / res.width * width} else {if (width > screenWidth) {width = screenWidth}if (height > 400) {height = 400width = res.width / res.height * height} else {height = height / res.width * width}}that.setData({imageWidth: width,imageHeight: height,})ctx.drawImage(res.path, 0, 0, width, height)ctx.rotate(20 * Math.PI / 180)for (let j = 1; j < 12; j++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText('身份证水印', 0, 50 * j)for (let i = 1; i < 12; i++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText("身份证水印", (15 + (14 - 1) * "身份证水印".length) * i, 50 * j)}}ctx.draw(false, () => {//生成图片wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function (res) {console.log("canvas可以生成图片")console.log(res.tempFilePath, 'canvas图片地址');// tempFilePath可以作为img标签的src属性显示图片console.log('选择图片', res)const tempFilePaths = res.tempFilePathwx.cloud.uploadFile({cloudPath: Date.parse(new Date()) + "",filePath: tempFilePaths,success: res => {console.log('上传成功', res)let imgUrl = res.fileIDthat.setData({zhengmian: imgUrl})},fail: err => {console.log('上传失败', err)}})}})})}})}})},fanmian_img() {let that = thisvar ctx = wx.createCanvasContext('myCanvas')wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {//获取图片基本信息wx.getImageInfo({src: res.tempFilePaths[0],success: function (res) {var width = res.widthvar height = res.height//获取屏幕宽度let screenWidth = wx.getSystemInfoSync().windowWidth//处理一下图片的宽高的比例if (width >= height) {if (width > screenWidth) {width = screenWidth}height = height / res.width * width} else {if (width > screenWidth) {width = screenWidth}if (height > 400) {height = 400width = res.width / res.height * height} else {height = height / res.width * width}}that.setData({imageWidth: width,imageHeight: height,})ctx.drawImage(res.path, 0, 0, width, height)ctx.rotate(20 * Math.PI / 180)for (let j = 1; j < 12; j++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText('身份证水印', 0, 50 * j)for (let i = 1; i < 12; i++) {ctx.beginPath()ctx.setFontSize(14)ctx.setFillStyle('white')ctx.fillText("身份证水印", (15 + (14 - 1) * "身份证水印".length) * i, 50 * j)}}ctx.draw(false, () => {//生成图片wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function (res) {console.log("canvas可以生成图片")console.log(res.tempFilePath, 'canvas图片地址');// tempFilePath可以作为img标签的src属性显示图片console.log('选择图片', res)const tempFilePaths = res.tempFilePathwx.cloud.uploadFile({cloudPath: Date.parse(new Date()) + "",filePath: tempFilePaths,success: res => {console.log('上传成功', res)let imgUrl = res.fileIDthat.setData({fanmian: imgUrl})},fail: err => {console.log('上传失败', err)}})}})})}})}})},live_phone() {let that = thiswx.chooseImage({count: 9,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// tempFilePath可以作为img标签的src属性显示图片// console.log('选择图片', res)const tempFilePaths = res.tempFilePathsthat.setData({live_phone: []})let i = 0for (i; i < tempFilePaths.length; i++) {// console.log(i, ':', tempFilePaths[i])let url = tempFilePaths[i]// 将图片上传至云存储空间wx.cloud.uploadFile({// 指定上传到的云路径cloudPath: Date.parse(new Date()) + i + '.png',// 指定要上传的文件的小程序临时文件路径filePath: url,// 成功回调success: res => {console.log('上传成功', res)// 成功之后的图片地址let imgUrl = res.fileIDlet arr = [imgUrl]that.setData({live_phone: that.data.live_phone.concat(arr)})}})}}})},formsubmit: function (e) {var that = this;var formData = e.detail.value;console.log('formData1', formData)if (this.data.hande) formData.hande = this.data.hande;if (this.data.live_phone) formData.live_phone = this.data.live_phone;if (this.data.sex) formData.sex = this.data.sex;if (this.data.region1) formData.region1 = this.data.region1[0] == "请选择" ? null : this.data.region1;if (this.data.region2) formData.region2 = this.data.region2[0] == "请选择" ? null : this.data.region2;if (this.data.xuli) formData.xuli = this.data.xuli;if (this.data.ziyie) formData.ziyie = this.data.ziyie;if (this.data.car) formData.car = this.data.car;if (this.data.house) formData.house = this.data.house;if (this.data.love) formData.love = this.data.love;console.log('formData2', formData)this.userAdd(formData)},userAdd(formData) {if (this.data.user && this.data.user.hande) {formData.hande = this.data.user.hande}console.log(formData.name, formData.hande, formData.sex, formData.phoneNumber, formData.wxNumber, formData.userNumber)if (!formData.name || !formData.hande || !formData.sex || !formData.phoneNumber) {wx.showToast({title: '请确认必填信息填写完整',icon: 'none'})return}if (!util.IdentityCodeValid(formData.userNumber)) {wx.showToast({title: '身份证信息错误',icon: 'none'})return}if (!util.regPhone(formData.phoneNumber)) {wx.showToast({title: '手机号错误',icon: 'none'})return}wx.setStorageSync('userInfoDetail', formData);DB.collection('user').doc(wx.getStorageSync('userInfo')._id).update({data: {userInfoDetail: formData}})if (this.data.nav_type == "login") {console.log('11111111111111111111111111')wx.navigateTo({url: '/pages/character_list/index',})} else {console.log('2222222222222222222222222')wx.switchTab({url: '/pages/find/index',})}},//省市区选择器：bindRegionChange1: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region1: e.detail.value})},//省市区选择器：bindRegionChange2: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region2: e.detail.value})},next() {wx.navigateTo({url: '../character_list/index',success: function (res) {},fail: function (res) {},complete: function (res) {},})},input(e) {console.log(e)let tite = e.currentTarget.dataset.titlelet type = e.currentTarget.dataset.typelet text = e.detail.valuelet arr = {tite: tite,type: type,text: text}this.setData({arr_list: this.data.arr_list.push(arr)})},radioChange(e) {this.setData({sex: e.detail.value})},// 学历xuli() {let list = ['研究生及以上', '本科', '专科及以下']wx.showActionSheet({itemList: list,itemColor: '',success: function (res) {console.log(res)that.setData({xuli: list[res.tapIndex]})},fail: function (res) {},complete: function (res) {},})},// 职业ziyie() {let list = ['企业员工', '公务员', '自由职业', '其他']wx.showActionSheet({itemList: list,itemColor: '',success: function (res) {that.setData({ziyie: list[res.tapIndex]})},fail: function (res) {},complete: function (res) {},})},//车car() {let list = ['自己名下有车全款', '自己名下有车贷款', '没车', '家里有车']wx.showActionSheet({itemList: list,itemColor: '',success: function (res) {that.setData({car: list[res.tapIndex]})},fail: function (res) {},complete: function (res) {},})},// 房house() {let list = ['自己名下有房全款', '自己名下有房贷款', '没房', '家里有房']wx.showActionSheet({itemList: list,itemColor: '',success: function (res) {that.setData({house: list[res.tapIndex]})},fail: function (res) {},complete: function (res) {},})},// 恋爱状态love() {let list = ['未恋爱过', '恋爱分手一年内', '恋爱分手多年', '离异自己带子女', '离异无子女', '离异对方带子女']wx.showActionSheet({itemList: list,itemColor: '',success: function (res) {that.setData({love: list[res.tapIndex]})},fail: function (res) {},complete: function (res) {},})}
})

css

.title {width: 100%;text-align: center;font-size: 36rpx;font-weight: 800;
}
radio{}
.top{width: 100%;min-height: 200rpx;
}
.info{padding: 30rpx;
}
.itemaaaa .text{margin-top: 10rpx;
}
.itemaaaa input{position: relative;top: -20rpx;
}
.itemaaaa .mg_bo{display: flex;flex-direction: row;
}
.mg_bo{margin: 20rpx;/* border-bottom: 1rpx solid #ccc; */padding-bottom: 40rpx
}
.text {font-size: 32rpx;color: #233144;
}
.text_ {font-size: 22rpx;color: rgba(111, 111, 112, 0.89);
}
input{width: 90%;border-bottom: 1rpx solid #ccc;margin-left: 5%;margin-top: 10rpx;padding: 10rpx
}
.flexRow{display: flex;flex-direction: row
}
.mg_bot{margin-bottom: 20rpx;
}
label{flex: 1;text-align: center
}
.img_{width: 300rpx;height: 300rpx;text-align: center;line-height: 300rpx;border: 1rpx solid #ccc;background: rgb(228, 228, 228);font-size: 100rpx;color: #fff;/* margin-left: 200rpx; */margin-top: 20rpx
}
.img_2{width: 500rpx;}
.img_ .img{
width: 100%;
height: 100%;
}
.map_bo{width: 100%
}
.map_bo view{flex: 1;
text-align: center
}
.bt_input{width: 100rpx
}
.bt_input2{width: 300rpx;
}
.ganggang{width: 100rpx;text-align: center;margin-right: -5%;
}
.da{margin-left: 100rpx;padding-top: 10rpx;
}
.col{color: #757575
}
textarea{width: 600rpx;border: 1rpx solid #ccc;margin-top: 10rpx;padding: 20rpx
}
.next{margin: 100rpx;background: #0778fa;color: #fff;line-height: 80rpx;text-align: center;border-radius: 16rpx
}

小程序图片加水印实现代码，带效果图相关推荐

微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
给图片加水印的代码java_Java为图片加水印的代码
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. import java.awt.AlphaComposite; import java.a ...
微信小程序背景加水印简单版
小程序页面增加水印效果因为所有页面都要加水印,所以肯定是要用自定义组件实现. 思考路程第一种最开始考虑的是canvas生成图片,转换成base64做一张背景图,然后才了解到水印不能直接在元素上 ...
VS.net图片加水印的代码
前文:实在是好久没有更新这个博客了.主要是本人现在不走技术路线,过了那个研究技术的年代了.现在做一些零散的很多事情. 今天突然收到猎头的邮件,看着心里激动啊.呵呵.当然,目前的状况也就看看,毕竟人生的 ...
微信小程序跑马灯效果完整代码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:功能介绍及讲解实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮, ...
小程序图片缓存策略(不改代码更换OSS图片)
昨天,后端给我提了一个问题:他更换了CDN上的图片,但是他打开小程序来看,还是旧图片,他尝试过删除小程序,重新进,还是旧图片. 我第一反应是:"你有没有清CDN缓存?" 他说:&q ...
如何利用 webp 进行小程序图片加载速度的优化
导语最近很长一段时间没有更新博客,一方面是自己最近参与了小程序的开发,另一方面也是自己略有些怠惰,给自己记个过~那么现在既然回到学校那么还是要分享一些知识的. 前一阵子参与微信小程序开发时遇到了一个 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
小程序图片加载失败binderror方法处理
场景:我们在小程序项目中的一个图片列表,当某些图片加载失败后,直接显示空白,这样用户体验不好,为了解决当图片加载失败,我们给一个默认图片代替,参考官方给的图片加载失败的处理方法:binderror c ...

小程序图片加水印实现代码，带效果图

小程序图片加水印实现代码，带效果图相关推荐

最新文章

热门文章