- 微信小程序真机测试没有任何问题,上线后保存图片功能失效?
小程序上线发布后,保存图片到本地,功能失效,点击后无任何反应
2023-07-24 - 如何将view制成的表格页面转成图片下载到手机?卡这个需求半个月了还是不知道怎么做
我用的这个代码,跑不通 1. 在页面的 WXML 文件中,添加一个下载按钮。 ```html <view id="exportContent"> <text>这是要导出的内容</text> <image src="{{imageSrc}}" mode="widthFix"></image> </view> <canvas canvas-id="canvas" class="canvas" style="display: none;"></canvas> <button bindtap="handleExportImage">导出图片</button> <button bindtap="handleSaveImage">保存图片到相册</button> ``` 2. 在页面的 JS 文件中,添加导出图片和保存图片的逻辑。 ```javascript Page({ data: { imageSrc: '', }, handleExportImage() { wx.createSelectorQuery() .select('#exportContent') .fields({ node: true, size: true }) .exec((res) => { const canvasNode = res[0].node const canvasWidth = res[0].width const canvasHeight = res[0].height const canvasContext = wx.createCanvasContext('canvas', this) canvasContext.drawImage(canvasNode, 0, 0, canvasWidth, canvasHeight) canvasContext.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'canvas', success: (res) => { this.setData({ imageSrc: res.tempFilePath }) }, fail: (error) => { console.error('导出图片失败', error) } }, this) }) }) }, handleSaveImage() { const imageSrc = this.data.imageSrc if (!imageSrc) { console.error('请先导出图片') return } wx.saveImageToPhotosAlbum({ filePath: imageSrc, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail: (error) => { console.error('保存图片失败', error) } }) } }) ``` 在 `handleSaveImage` 方法中,我们首先获取到导出的图片路径(通过页面数据的 `imageSrc` 属性)。然后,我们使用 `wx.saveImageToPhotosAlbum` 接口将图片保存到相册中。成功保存后,我们可以通过 `wx.showToast` 方法显示一个保存成功的提示。 请注意,在向用户请求保存图片权限之前,你需要在小程序的配置文件 `app.json` 的 `permission` 字段中添加 `writePhotosAlbum` 权限: ```json { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于保存图片" } } } ``` 使用 `wx.saveImageToPhotosAlbum` 进行图片保存需要用户授权,如果用户拒绝授权,你可以引导用户在小程序设置页面开启授权。
2023-07-12 - 如何将view里的内容转到canvas 2d并生成图片?我都快被这个新版canvas搞疯了
[图片]
2023-07-10