普通字符串base64编码转化可以使用原生的atob和btoa方法

图片转码：传统的图片转base64的方法可以采用FileReader的readAsDataURL()或canvas.toDataURL('image/jpeg')

参考：https://blog.csdn.net/oulihong123/article/details/73927514

但是令人无语的是以上原生方法在微信小程序中都没有，只有小游戏中提供了toDataURL方法，所以以上方法在小程序中就没用了，网上有大神采用upng库+wx.arrayBufferToBase64

来实现了base64编码转换，本人亲测可行。

参考 https://github.com/photopea/UPNG.js     使用案例：https://github.com/zhousning/wx-cardscanner，需要用到的两个js文件可从案例中复制

使用upng，也需要pako，一块下载下来放到utils文件夹下

var Base64 = require('../../utils/base64.js')
stopDraw: function(e) {
    ctx.stroke();
    ctx.draw(true, function(){
      wx.canvasGetImageData({
        canvasId: 'game-canvas-answer',
        x: ,
        y: ,
        width: ,
        height: ,

        success: function(res) {
          let arrayBuffer = upng.encode([res.data.buffer], res.width, res.height)
          var imageBase64 = wx.arrayBufferToBase64(arrayBuffer);
        }
      })
    });
  }

小程序canvas转base64方法 使用upng库 亲测没问题的更多相关文章

  1. 小程序canvas绘制base64数据格式图片

    翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...

  2. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  3. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  4. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  5. 优化版小程序canvas，增加失败逻辑，及完善文字

    wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...

  6. 小程序Canvas性能优化实战

    以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...

  7. 原创：WeZRender：微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  8. 记录一下小程序canvas

    小程序canvas学习 效果图: .wxml <canvas style="width: 100vw; height: 100vh;" canvas-id="fir ...

  9. 微信小程序 canvas 字体自动换行（支持换行符）

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

随机推荐

  1. SU54 新建视图簇 维护数据表

    由于一些数据表的数据比较重要,不允许直接查看数据表中的数据或者通过SM30进行维护, 故可以通过新建一个视图簇的方式来实现,然后通过程序调用这个视图簇,来进行数据的维护. 运行事务码SE54 最后通过 ...

  2. Spring事务管理(转)

    Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring的事务管理分为声明式跟编程式.声明式就是在Spring的配置文件中进行相关配置 ...

  3. js获取IP和MAC地址

    1.IP 百度一下有很多 可以用这个 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> ...

  4. nginx学习（二）：初识配置文件

    nginx的配置文件默认在nginx安装目录中的conf子目录中,主配置文件为nginx.conf, root@mgmserver conf]# pwd/usr/local/nginx/conf一.配 ...

  5. 在ASP.Net2.0中使用UrlRewritingNet实现链接重写

    采用UrlRewritingNet.UrlRewriter.dll来轻松实现UrlRewritingNet.UrlRewriter.dll 可从其官方网站下载:http://www.urlrewrit ...

  6. 26、Oracle（二）

    1)掌握多行函数与分组操作 2)掌握多表查询与子查询 3)理解集合查询与掌握Oracle分页语法 4)理解创建.修改和删除表和表约束 --------------------------------- ...

  7. 新写的c++日志库：log4K

    网是开源的c/c++日志库也不少,但用起来总觉得不方便,于是动手写了一个C++日志框架Log4K. 测试代码: #include "log4k.h" #pragma comment ...

  8. java后端模拟表单提交

    代码可实现文本域及非文本域的处理 请求代码: /** * 上传 * * @param urlStr * @param textMap * @param fileMap * @return */ pub ...

  9. SAS 9.4 的sid问题解决方案汇总（头疼...）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 因为经常出现sid出现问题,所以问题很多.最常 ...

  10. 推荐一个比crontab更好用的东西：crongo

    This is a crontab service that supports hot plug and high performance. In addition, it supports seco ...