const app = getApp()
Page({ data: { urls: [], inputValue: "图片URL", buttonStatus: false, category: ['Jacket', 'dress', 'trousers', 'bag', 'shoe', 'accessories'], motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 console.log(e) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) },
isUrl (url) { var urlRegExp=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/; if(urlRegExp.test(url)){ return true; }else{ return false; } },
imageSearch() { var that = this wx.request({ url: 'http://****/search', data: { "GroupId": "***", "ImageUrl": this.data.inputValue }, method: "POST", header: { 'Content-Type': "application/json" }, success (res) { if (res.data == null) { wx.showToast({ icon: "error", title: '请求失败', }) return } console.log(res.data) that.setData({ urls: res.data.Urls, object: res.data.Object }) that.drawInputImage() }, fail(res) { wx.showToast({ icon: "error", title: '请求失败', }) } }) },
drawInputImage: function() { var that = this; wx.downloadFile({ url: that.data.inputValue, success: function(res) { var imagePath = res.tempFilePath // 绘制 wx.getImageInfo({ src: imagePath, success: function(res) { wx.createSelectorQuery() .select('#input_canvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((r) => { // Canvas 对象 const canvas = r[0].node // 渲染上下文 const ctx = canvas.getContext('2d') // Canvas 画布的实际绘制宽高 const width = r[0].width const height = r[0].height
// 初始化画布大小 const dpr = wx.getWindowInfo().pixelRatio canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) // 清空画布 ctx.clearRect(0, 0, width, height)
let radio = height / res.height console.log("radio:", radio) const img = canvas.createImage() var x = width / 2 - (res.width * radio / 2)
img.src = imagePath img.onload = function() { ctx.drawImage(img, x, 0, res.width * radio, res.height * radio) var allBox = that.data.object.AllBox ctx.fillStyle = 'rgba(247, 15, 2, 0.7)'; for (var i in allBox) { if (allBox[i].Rect.X == that.data.object.Box.Rect.X && allBox[i].Rect.Y == that.data.object.Box.Rect.Y) { continue } ctx.fillRect(x + (allBox[i].Rect.X * radio), allBox[i].Rect.Y * radio, allBox[i].Rect.Width * radio, allBox[i].Rect.Height * radio); } // 绘制主体 ctx.fillStyle = 'rgba(159, 255, 125, 0.7)'; //rgba(0, 0, 200, 0.5) ctx.fillRect(x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio, that.data.object.Box.Rect.Width * radio, that.data.object.Box.Rect.Height * radio); console.log(that.data.object.AllBox)
// 绘制文字背景 let text = `${that.data.category[that.data.object.CategoryId]} ${that.data.object.Box.Score}` ctx.fillStyle = '#221329' ctx.fillRect(x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio, that.data.object.Box.Rect.Width * radio, 15) // 绘制文字 ctx.fillStyle = '#fcfafc' console.log(that.data.category[that.data.object.CategoryId]) ctx.fillText(text, x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio + 10) } }) } }) } }) },
handlerInput(e) { console.log(e) this.setData({ inputValue: e.detail.value }) },
handlerSearch(e) { console.log(this.data.inputValue) if (!this.isUrl(this.data.inputValue)) { console.log("error url: ", this.data.inputValue) wx.showToast({ icon: "error", title: '请输入正确url', }) return } this.setData({buttonStatus: true}) this.imageSearch() this.setData({buttonStatus: false}) }, handlerInputImage(e) { console.log(e) }})
评论