小程序canvas高斯模糊

最新推荐文章于 2024-12-29 10:15:00 发布

原创

最新推荐文章于 2024-12-29 10:15:00 发布 · 797 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #canvas

本文介绍了如何在小程序中利用JavaScript和canvas实现高斯模糊效果，详细解析了关键的高斯模糊函数，帮助开发者实现图像处理功能。

//以下是小程序html代码
 <canvas canvas-id="canvasIn" class="canvas"></canvas>
 <canvas canvas-id="canvasOut" class="canvas"></canvas>
 <button bindtap="openAndDraw">打开图片并绘制</button>
 <button bindtap="process">处理图像</button>
 <button bindtap="export">导出画布至图片</button>

//以下是小程序css代码
button {
   
   
  margin-top: 30rpx;
}

canvas {
   
   
  width: 650px;
  height: 500px;
}

//以下是小程序的js代码
function convertToGrayscale(data) {
   
   
  let g = 0
  for (let i = 0; i < data.length; i += 4) {
   
   
    g = (data[i] * 0.3 + data[i+1] * 0.59 + data[i+2] * 0.11)
    data[i] = g
    data[i+1] = g
    data[i+2] = g
  }
  return data
}

Page({
   
   
  data:{
   
   
    width:'',
    height:''
  },
  onReady() {
   
   
  },

  openAndDraw() {
   
   
    let _this=this
    wx.chooseImage({
   
   
      success: (res) => {
   
   
        console.log(res);
        const ctx = wx.createCanvasContext('canvasIn', this);
        wx.getImageInfo(