微信小程序照片处理示例：选择、滤镜、展示

以下是一个处理照片的微信小程序示例：\n\n1. 在微信小程序的首页，添加一个按钮，用于选择照片：\n\nhtml\n<button bindtap="chooseImage">选择照片</button>\n\n\n2. 在微信小程序的JS文件中，添加一个方法，用于选择照片：\n\njavascript\nPage({\n chooseImage: function () {\n wx.chooseImage({\n count: 1, // 最多可以选择的图片张数\n sizeType: ['original', 'compressed'], // 所选的图片的尺寸\n sourceType: ['album', 'camera'], // 选择图片的来源\n success: function (res) {\n var tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表\n // 在这里可以进行照片处理的逻辑\n }\n })\n }\n})\n\n\n3. 在选择照片成功后，可以调用微信小程序提供的图片处理API，例如添加滤镜效果：\n\njavascript\nPage({\n chooseImage: function () {\n wx.chooseImage({\n count: 1,\n sizeType: ['original', 'compressed'],\n sourceType: ['album', 'camera'],\n success: function (res) {\n var tempFilePaths = res.tempFilePaths;\n wx.getImageInfo({\n src: tempFilePaths[0],\n success: function (res) {\n var ctx = wx.createCanvasContext('canvas');\n ctx.drawImage(res.path, 0, 0, res.width, res.height);\n ctx.filter = 'grayscale(100%)'; // 添加滤镜效果\n ctx.draw(false, function () {\n wx.canvasToTempFilePath({\n canvasId: 'canvas',\n success: function (res) {\n var processedImagePath = res.tempFilePath; // 处理后的照片路径\n // 在这里可以进行处理后的照片的展示或保存等操作\n }\n })\n })\n }\n })\n }\n })\n }\n})\n\n\n4. 在微信小程序的首页添加一个Canvas标签，用于展示处理后的照片：\n\nhtml\n<canvas id="canvas" style="width: 100%; height: 100%"></canvas>\n\n\n通过以上示例，可以实现选择照片并添加滤镜效果，最后在Canvas上展示处理后的照片。可以根据需求进一步扩展照片处理的功能，例如裁剪、旋转、添加文字等。