微信小程序基于canvas实现纯色背景抠图功能

Page({ data: { title: '', idx: '', imgsrc:'', // 个人写的图片 imgurl: '', //对照的标准图片 // 以下是裁剪组件的属性 src: null, visible: false, size: { width: 300, height: 300 }, cropSizePercent: 0.9, borderColor: 'red', result: '', }, onLoad: function (opt) { console.log("opt::", opt); this.setData({ title: opt.title, imgurl:opt.src }) }, myCheck: function () { let that = this; //从相册获取照片 wx.chooseMedia({ count: 1, mediaType: ['image'], sourceType: ['album', 'camera'], success(res) { var tempFilePath = res.tempFiles[0].tempFilePath; console.log("path::", tempFilePath); // 进行图片裁剪 that.setData({ visible: true, src: tempFilePath }) }, }); }, //选取裁剪图片成功回调 uploadCallback: function (event) { console.log("选取裁剪图片成功回调：：",event); }, //裁剪图片回调 cropCallback: function (event) { console.log("裁剪图片确认后回调：：",event); this.setData({ visible: false, result: event.detail.resultSrc, }); this.clrBgd(event.detail.resultSrc) }, //关闭回调 closeCallback: function (event) { console.log("裁剪图片取消后回调：：",event); this.setData({ visible: false, }); }, clrBgd(imgPath) { wx.createSelectorQuery() .select('#myCanvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node // 渲染上下文 const ctx = canvas.getContext("2d") const image = canvas.createImage() // const dpr = wx.getSystemInfoSync().pixelRatio let that = this // 图片加载完成回调 image.onload = () => { // 将图片绘制到 canvas 上 let width = 300 let height = 150 console.log("width2:", width, ",height2:", height); ctx.drawImage(image, 0, 0, width, height) const imgDt = ctx.getImageData(0, 0, width, height) const data = imgDt.data for (let i = 0; i < data.length; i += 4) { let r = data[i + 0] let g = data[i + 1] let b = data[i + 2] data[i + 0] = 255 data[i + 1] = 0 data[i + 2] = 0 if ([r, g, b].every(v => v > 80 && v < 256)) { data[i + 3] = 0 } } ctx.clearRect(0, 0, 360, 360) let nimgdt = canvas.createImageData(data, width, height) ctx.putImageData(nimgdt, 0, 0) let dtUrl = canvas.toDataURL("image/png") console.log("dataurl:", dtUrl); that.setData({ imgsrc: dtUrl, }) } // // 设置图片src image.src = imgPath; }) }, tstbtn() { console.log("data-img::", this.data.imgurl); } })