微信小程序uni-app图片和base64相互转换

这篇具有很好参考价值的文章主要介绍了微信小程序uni-app图片和base64相互转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app图片和base64相互转换


从手机上选择图片转base64:

getToBase64(){
  wx.chooseImage({
    count:'1',   // 最多可以选择的图片张数
    sizeType: ['original', 'compressed'], // ['原图','压缩图']
    sourceType: ['album', 'camera'],  // ['从相册选图','使用相机']
    success: res => {
    wx.getFileSystemManager().readFile({
        filePath: res.tempFilePaths[0], //选择图片返回的相对路径
        encoding: 'base64', //编码格式
        success: res => { //成功的回调
          console.log('data:image/png;base64,' + res.data)
        }
      })
    }
  })
},

网络图片转base64或者16进制:

getToBase64Two(){
  var httpsimg = 'https://baidu.com/a.jpg'   // 网络图片地址
  wx.downloadFile({     // 需要先下载 
    url: httpsimg,
    success(res) {
      console.log(res,'res')
      wx.getFileSystemManager().readFile({
          filePath: res.tempFilePath, //选择图片返回的相对路径
          encoding: 'base64', //编码格式:base64 | hex(16进制)
          success: res => { //成功的回调
            let userImageBase64 = 'data:image/jpg;base64,' + res.data;
            console.log(userImageBase64); // 打印base64格式图片
          }
      })
    }
  })
},

base64图片转本地图片:

getToLocal(){
 var base64data = "";   // base64
  const fsm = wx.getFileSystemManager();
  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
  if (!format) {
    return (new Error('ERROR_BASE64SRC_PARSE'));
  }
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success(r) {
      console.log(r,'r')
      console.log(filePath,'filePath')
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'));
    },
  });
},

以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。


源码获取方法:

需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~

会员学习群:【一对一答疑】

如果教程中有不懂的地方,可添加学习会员小助手咨询(微信:mifankeji77)文章来源地址https://www.toymoban.com/news/detail-622047.html

到了这里,关于微信小程序uni-app图片和base64相互转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • uni-app base64转图片

    首先将插件引入项目。按照image-tools - DCloud 插件市场上面的操作即可;

    2024年02月13日
    浏览(47)
  • uni-app 调用相机或相册图片并转为base64格式上传图片

    1、调用相机或相册上传图片 2、图片文件转base64 (1)下载插件 (2)页面引入插件 3、image-tools/index.js源码

    2024年02月11日
    浏览(47)
  • uni-app 中图片转 base64 以及 base64 转图片方式,超简单,超好用的图片转换工具,你值得拥有它。

    目录 简介 使用方式 NPM install 安装 直接下载 API pathToBase64 base64ToPath 提示:多个任务可以串行或者并行执行 一款非常好用的插件,它就是 image-tools  图像转换工具,可用于如下环境:uni-app、微信小程序、5+APP、浏览器(需允许跨域)。 NPM install 安装 页面引入js 即可使用 直接

    2024年02月08日
    浏览(181)
  • 微信小程序给图片加水印【使用uni-app】

    微信小程序给图片加水印【使用uni-app】

    选择图片后使用canvas绘制图片,再绘制需要的水印文字,将绘制好的画布转化为图片即可 最终效果

    2024年02月10日
    浏览(58)
  • uni-app 微信小程序 保存当前页面为图片

    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webview+html2canvas来完成 先说一下思路,既然在微

    2024年02月11日
    浏览(14)
  • uni-app微信小程序-利用canvas给图片添加水印

    uni-app微信小程序-利用canvas给图片添加水印

    选择图片 → 将图片绘制到 canvas 中并绘制水印 →将添加水印的图片绘制到 canvas 中 → 将 canvas 画布转换为图片地址 → 上传/展示操作 注意:微信小程序在选择照片或者唤起相机之前需要获取相应的 权限 利用 uni.getSetting 查看用户是否调用相机的权限(有就选择图片,没有就

    2024年02月06日
    浏览(16)
  • uni-app/微信小程序 实现图片或元素淡入淡出效果

    如题: 直接上代码 html js部分 需要在date中声明好                 current: 0,                 hidepic: null,                 showpic: null 因为是已进入就开始的,所以 要在生命周期中使用 最后一部别忘了,要给需要淡入淡出的元素或者图片设置绝对定位

    2024年02月12日
    浏览(17)
  • uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

    uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

    总结一下: 要进行海报绘制离不开canvas,我们是先进行图片,文字的拖拽、旋转等操作 最后再对canvas进行绘制,完成海报绘制。 背景区域设置为 position: relative,方便图片在当前区域中拖动等处理。 添加图片,监听图片在背景区域下的 touchstart touchmove touchend 事件 拖动图片,

    2024年02月09日
    浏览(50)
  • uni-app:使用 Painter 在微信小程序将当前页面保存为图片

    uni-app:使用 Painter 在微信小程序将当前页面保存为图片

    手机截屏 Painter 实现 方式一:Painter Painter 是一个微信小程序组件,具体介绍和 API 请参考:GitHub文档。 在 GitHub 下载下来之后只需要将 components 下的 painter 文件夹放到项目根目录下的 wxcomponents 文件夹即可。然后就是如何在 uni-app 中使用微信小程序形式的组件,其实很简单,

    2024年02月12日
    浏览(20)
  • uni-app 微信小程序 图文生成图片 wxml-to-canvas

    uni-app 微信小程序 图文生成图片 wxml-to-canvas

    在做的小程序要增加一个将文字与图片生成图片不可修改的功能,第一次做,在网上找了不少资料。参考了wxml-to-canvas | 微信开放文档  ,又看了一些相关事例,尝试写了一下。   需要准备的文件及配置项: 1、先把代码片段下载到本地 2、创建wxcomponents目录,把代码片段中的

    2024年02月09日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包