第一步,选择图片,直接调用uni.chooseImage(),顺利。 第二步,只拿到了图片路径??图片路径??? 傻眼~ 继续找方案 找了一圈,有个合适的方案———拿到地址,读取地址后面的图片,转成base64。 好在有大佬封装了一个库,来实现这个功能:image-tools(①)。 这个库里面实现了,图片路径转base64,图片base64保存为文件。
从图像路径转换为base64,uni-app、微信小程序和5+APP使用的路径不支持网络路径,如果是网络路径需要先使用下载API下载下来。 页面调用方式 代码语言:javascript 复制 pathToBase64(path).then(base64=>{console.log(base64)}).catch(error=>{console.error(error)}) base64ToPath 将图像base64保存为文件,返回文件...
// 设置头像base64 setAvatarBase64(src, callback) { let _this = this; let image = new Image(); // 处理缓存 image.src = src + '?v=' + Math.random(); // 支持跨域图片 image.crossOrigin = "*"; image.onload = function () { let base64 ...
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64 base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符,在页面无法显示 console.log(base64); } }); },
小程序大家应该都知道,通过上传组件得到的都是本地的一个临时路径,这个路径是不能被外网访问的,所以我们就需要将拿到的临时路径转成Base64上传到后台服务器。或者说是另外一个办法,就是通过组件直接上传文件,这个看需求设计吧。 一、Base64上传 1.下载图片转换工具image-tools ...
{console.log('将本地图片转为base 64报错:', err);}});},// 保存图片到手机相册saveImage() {console.log("点击了下载图片按钮",this.shareImg)uni.saveImageToPhotosAlbum({filePath: this.shareImg, // 需要临时文件路径，base64无法保存success: () => {this._showToast('保存图片...
在上面的代码中,我们定义了一个base64Image数据属性,它包含了图片的base64字符串。然后,在<image>标签中,我们使用:src(或v-bind:src)来绑定这个base64字符串。这样,uniapp就会将这个字符串解析为图片并显示出来。 3. 处理可能出现的跨域或图片加载问题 对于base64格式的图片,通常不会出现跨域问题,因为base...
可能有人会问 为什么不用@/static/image.png这种形式,经过查阅文档发现,这种方案是可行的,也是我自己推荐的,但是我们如果图片过大,这种在执行npm build:h5指令后,有些大图并不能转成base64 还是无法解析,所以方案你们可以根据场景去使用 【新增加的】 由于uni-app 不建议我们重写vue.config.js 那么 大图模式下 ...
正当我满足于他的压缩效率时,新的问题又出现了,我发现它压缩完成之后图片是一个 base64 文件。 然而uni.uploadfile 不支持 base64 文件上传,而且要的只是一个临时路径。哈?那我压了个寂寞? 所以此时我选择放弃了 uni.uploadfile。 直接使用接口向阿里云 oss 上传。 那就需要将 base64 文件转成 blob 文件,这个...
let base64 = data.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64, //就是这里需要获取微信环境的保存路径,所以最好把转好的base64传到小程序端来下载 let filePath = wx.env.USER_DATA_PATH + '/detail.png'; ...