普通字符串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. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  8. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  9. 原创:WeZRender:微信小程序Canvas增强组件

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

随机推荐

  1. LeetCode-Minimum Window Substring -- 窗口问题

    题目描述 Given a string S and a string T, find the minimum window in S which will contain all the charac ...

  2. 【Java】Java_18 方法

    方法(Method) 设计方法的原则:方法的本意是功能块,就是实现某个功能的语句块的集合.   我们设计方法的时候,最好保持方法的原子性,就是一个方法只完成1个功能,这样利于我们后期的扩展 方法的要点 ...

  3. 中小企业 DevOps 从 0 到 1

    原文:http://www.sohu.com/a/145065274_262549 今天主要有四个课题: 先聊一聊 DevOps: 然后跟大家聊一聊运维知识的体系和职业发展: 再是中小企业基于开源的 ...

  4. c++打印蛇形矩阵

    一个m*n的矩阵里按照下图形式填充,最后形成的矩阵即为蛇形矩阵,下图是m=4, n =5时的蛇形矩阵: 方法一:逐层循环 #include <iostream> using namespa ...

  5. 【拆分版】Docker-compose构建Elasticsearch 7.1.0集群

    写在前边 搞了两三天了,一直有个问题困扰着我,ES集群中配置怎么能正确映射到主机上,这边经常报ClusterFormationFailureHelper master not discovered o ...

  6. spark standlone 伪分布式安装

    一,在官网下载对应的版本http://spark.apache.org/downloads.html 二在linux中解压下来的spark包   三:配置环境变量     (1)在/etc/profi ...

  7. BFS 和 DFS

    DFS用到递归,BFS要用到一个辅助队列 #include "stdafx.h" #include<iostream> #include<vector> # ...

  8. 《TomCat与Java Web开发技术详解》(第二版) 第一章节的学习总结--HTTP组成+基本访问方式

    1.需要看懂HTML文件中的组成元素的基本含义.不同的组成元素,可以使得HTML支持文本,图片(img,将图片发给客户端),静态音频/视频(embed src,将音频视频发给客户端),超链接(href ...

  9. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  10. excel表格系列

    MicroSoft Excel表格系列问题 1.excel表格修改默认行高 2.[Excel技巧]Excel实现部分保护技巧