微信小程序动态获取图片主色调作为背景

引入image-main-color插件

import { getMainColor } from '../../utils/image-main-color.js'setBackgroundColor() {const ctx = wx.createCanvasContext('myCanvas')const that = thiswx.getImageInfo({src: `${that.data.imageSrc}`,success: function (res) {const poster = res.pathctx.drawImage(poster, 100,100, 150, 100)ctx.draw(false, () => {wx.canvasToTempFilePath({x: 100,y: 100,width: 150,height: 100,destWidth: 150,destHeight: 100,canvasId: "myCanvas",success(res) {let tempPath = res.tempFilePath// 这种方式获取canvas区域隐含的像素数据wx.canvasGetImageData({canvasId: 'myCanvas',x: 100,y: 100,width: 150,height: 100,success(res) {const imageData = res.data// 分区块，可以拓展性的求主要色板，用来做palettelet resImageObj = getMainColor(imageData)const { defaultRGB } = resImageObjconst { r, g, b } = defaultRGBlet resBackground = `rgb(${r}, ${g}, ${b})`// console.log('resBackground',resBackground)that.setData({resBackground})// ctx.setFillStyle(resBackground)// ctx.fillRect(0, 0, 150, 100)// ctx.draw()},})},fail() {throw new Error()}})})},fail() {}})},

微信小程序动态获取图片主色调作为背景相关推荐

学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...
微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
微信小程序动态获取时间
在微信小程序中如何实现动态的获取时间呢?在这里我将直接提供代码,直接复制进去后就可以直击使用了. JS部分 var util = require('../../../utils/utils.js'); ...
微信小程序-动态设置图片的高度
1.在index.wxml文件中:给图片绑定一个图片加载完成的方法: <image bindload="onImageLoad" class="img" ...
微信小程序动态修改图片并将图片实时更新
适用范围:在处理含有多张图片上传/修改时如图:在数组中存在object类型的图片,我目标是进行修改ChapPicture[i].ChapPicture的值(动态绑定) 因此i是变量,需要从前端拿值: ...
微信小程序动态获取和设置元素宽高
需求由于设计界面时常常会用到vh和rpx来设置元素的宽高,但是由于每个手机屏幕的高都不确定,而有时候在设计界面时想把内容刚好适应屏幕大小. 解决方法设置要动态修改宽高的元素. <view c ...
微信小程序 --- 动态获取input的value
这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <but ...
微信小程序 - 动态背景图片实现
很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)
微信小程序如何获取本地图片的网络地址
~~ 微信小程序如何获取本地图片的网络地址 ~~ 要想获取本地图片网络地址,首先得要上传到网络一般的网络上传比如QQ空间上传后右键图片获取其网络地址即可,但是小程序端可能会报错,大家可以试一试还 ...

微信小程序动态获取图片主色调作为背景

微信小程序动态获取图片主色调作为背景相关推荐

最新文章

热门文章

微信小程序 动态获取图片主色调作为背景

微信小程序 动态获取图片主色调作为背景相关推荐

最新文章

热门文章

微信小程序动态获取图片主色调作为背景

微信小程序动态获取图片主色调作为背景相关推荐