您的位置:首页 > 新闻 > 热点要闻 > 计算机网页制作题操作步骤_简约中国风免费ppt模板_今天的新闻联播_数据分析师要学什么

计算机网页制作题操作步骤_简约中国风免费ppt模板_今天的新闻联播_数据分析师要学什么

2025/3/10 3:50:01 来源:https://blog.csdn.net/gurenchang/article/details/145967189  浏览:    关键词:计算机网页制作题操作步骤_简约中国风免费ppt模板_今天的新闻联播_数据分析师要学什么
计算机网页制作题操作步骤_简约中国风免费ppt模板_今天的新闻联播_数据分析师要学什么

前言:

最近在公司完成一个小程序的时候需要实现一个功能:点击按钮获取用户相册权限,将图片下载到用户本地相册,经过了好几次的尝试最终算是实现了。将总结的经验在这里分享给小伙伴们。

实现方式:

//.wxml文件
<view class="canvas-box">
//注意:一定要添加:type="2d"<canvas id="posterCanvas"canvas-id="posterCanvas" type="2d"></canvas><view class="upload_btn" bindtap="onSaveSuccess"></view>
</view>
 //.js文件data: {urlSrc: "",},
// 保存图片onSaveSuccess() {const query = wx.createSelectorQuery().in(this);query.select("#posterCanvas").fields({ node: true, size: true }).exec((res) => {if (res[0] && res[0].node) {const canvas = res[0].node;// 将 canvas 内容导出为临时文件wx.canvasToTempFilePath({canvas,success: (res) => {if (res.tempFilePath) {this.setData({urlSrc: res.tempFilePath,});this.saveCard(res.tempFilePath);} else {wx.showToast({title: "导出失败,请重试",icon: "none",});}},fail: (err) => {wx.showToast({title: "导出失败,请重试",icon: "none",});},});} else {wx.showToast({title: "未找到 canvas 节点",icon: "none",});}});},saveCard: function (img) {let that = this;var imgSrc = img;//获取相册授权wx.getSetting({success(res) {if (!res.authSetting["scope.writePhotosAlbum"]) {wx.authorize({scope: "scope.writePhotosAlbum",success() {that.img(imgSrc);},});} else {that.img(imgSrc);}},});},img: function (imgSrc) {var imgSrc = imgSrc;// wx.downloadFile({//   url: imgSrc,//   success: function (res) {wx.saveImageToPhotosAlbum({filePath: imgSrc,success: function (data) {wx.showToast({title: "保存成功",duration: 2000,});},fail: function (err) {if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {wx.openSetting({success(settingdata) {if (settingdata.authSetting["scope.writePhotosAlbum"]) {wx.showToast({title: "图片已保存",icon: "none",duration: 2000,});console.log("获取权限成功,给出再次点击图片保存到相册的提示。");} else {console.log("获取权限失败,给出不给权限就无法正常使用的提示");}},});}},});//   },//   fail: function (err) {//     console.log(err, "进入wx.downloadFile错误分支");//   },// });},

注意事项:
不使用wx.downloadFile方法的原因是:使用 wx.canvasToTempFilePath方法将会导出一个http://temp....png的图片,使用wx.downloadFile方法将会报错:downloadFile:fail url not in domain list,关于解决这个报错请看我的另一篇博客:解决微信小程序下载图片报错:downloadFile:fail url not in domain list。众所周知,微信公众平台的downloadFile合法域名只能配置以https://开头的域名,既然已经获得了这个文件地址就可以直接调用 wx.saveImageToPhotosAlbum方法,将其直接保存在用户本地相册

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com