《网站设计与建设》电子书,网站广审怎么做,wordpress无法进入登录页,在线html制作网页1、安装 Mini App Color Thief 包 包括下载包#xff0c;简单使用都有#xff0c;之前写了#xff0c;这里就不写了 网址#xff1a;微信小程序的图片色彩分析#xff0c;窃取主色调#xff0c;调色板-CSDN博客 2、 问题和解决方案 问题#xff1a;由于我们的窃取图片的…1、安装 Mini App Color Thief 包 包括下载包简单使用都有之前写了这里就不写了 网址微信小程序的图片色彩分析窃取主色调调色板-CSDN博客 2、 问题和解决方案 问题由于我们的窃取图片的是需要画布的我需要使用网络图片去用画布时微信小程序会报错最后发现需要本地图片才行用网络图片会出问题解决方案我们使用wx.downloadFile去下载该图片然后获取临时路径去使用画布和Mini App Color Thief 包 窃取图片颜色防止图片重复下载的话我们去用微信小程序中的另一个apiFileSystemManager.access(Object object)去判断临时文件是否存在 3、配置downloadFile.js文件【放置在utils文件夹下】
export default (url, path ) {return new Promise((resolve, reject) {const fs wx.getFileSystemManager()// 判断文件/目录是否存在fs.access({path,success(res) {// 文件存在复用console.log(res)resolve(path)},fail(res) {// 文件不存在或其他错误下载为临时文件console.log(res)wx.downloadFile({url,success(res) {if (res.statusCode 200) {resolve(res.tempFilePath)wx.setStorageSync(bgcUrl, res.tempFilePath)}},fail: (err) {reject(err)}})}})})
}
4、获取图片临时路径开始窃取 注意wxml中需要放置 canvas canvas-idmyCanvas / import downloadFile from ../../utils/downloadFilePage({data: {palette: ,// 用户信息userInfo: {},},// 判断是否有背景图片的缓存文件没有就下载为临时文件最后绘画出来async bgcDownload() {let bgcUrl wx.getStorageSync(bgcUrl)let result await downloadFile(this.data.userInfo.backgroundUrl, bgcUrl)console.log(result);const ctx wx.createCanvasContext(myCanvas)ctx.drawImage(result, 0, 0, 100, 100);ctx.draw(false, () {wx.canvasGetImageData({canvasId: myCanvas,x: 0,y: 0,width: 100,height: 100,success: res {let palette colorThief(res.data).color().getHex();this.setData({ palette })}});})},onReady: function () {this.bgcDownload()},
})
