小程序canvas转base64方法 使用upng库 亲测没问题
普通字符串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文件夹下
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库 亲测没问题的更多相关文章
- 小程序canvas绘制base64数据格式图片
翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
- 优化版小程序canvas,增加失败逻辑,及完善文字
wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...
- 小程序Canvas性能优化实战
以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...
- 技术博客--微信小程序canvas实现图片编辑
技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...
- 小程序canvas绘制纯色圆角区域 setdata数组某一项
小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
随机推荐
- 1通过URL对象的openStream()方法能够得到指定资源的输入流。
通过URL读取网页内容 1通过URL对象的openStream()方法能够得到指定资源的输入流. 2通过输入流能够读取.訪问网络上的数据. 案例: import java.io ...
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记30 ScrollView Demo实战
在上一话中我们创建了一个通过URL读取图片的Demo,这个Demo是不能拖动和缩放的.如今给它添加选项让它能够手动切换URL,并把图片加入到ScrollView中. 向Storyboard中拖入一个s ...
- 控制器View是怎样创建的?
对于非常多程序猿来说控制器和View的关系肯定有点模糊,对于View的创建肯定有一种说不清道不明的感觉.view仅仅是控制器的一个属性.控制器中有很多对view处理的方法.也就是说得控制器管理view ...
- xUtils介绍 -- DbUtils、ViewUtils、HttpUtils、BitmapUtils
转载注明出处:https://github.com/wyouflf/xUtils xUtils简单介绍 xUtils 包括了非常多有用的android工具. xUtils 支持大文件上传,更全面的ht ...
- Java + Selenium + Appium手机自动化测试
一.启动测试机或者Android模拟器(Genymotion俗称世界上最快的模拟器,可自行百度安装) 二.启动Appium(Appium环境安装可自行百度) 三.安装应用到Genymotion上,如下 ...
- nginx 做前端代理时proxy参数配置
1.后台可登录: proxy_connect_timeout 300s; proxy_send_timeout ; proxy_read_timeout ; proxy_buffer_size 256 ...
- Laravel5.4使用Memcached缓存
修改默认的缓存驱动 Laravel默认的缓存驱动是file,想要切换为Memcached需要修改.env文件.把CACHE_DRIVER=file改为CACHE_DRIVER=memcached,改好 ...
- MyEclipse配置输出控制台信息至文本文件里
有时会遇到这种情况.输出的信息过多,console控制台显示不全然.这是就须要将输出的信息输出到文本文件里,既能够查看也能够备份. 1.右击须要执行的项目->Run As->Run Con ...
- Sphinx初探之安装
在Centos or redhat 安装Sphinx .首先安装依赖包 $ yum install postgresql-libs unixODBC .安装软件 $ rpm -Uhv sphinx-- ...
- php给图片添加文字水印方法汇总
在php中要给图片加水印我们需要给php安装GD库了,这里我们不介绍GD库安装,只介绍怎么利用php给图片添加文字水印的4种方法的汇总.有需要的小伙伴可以参考下. 1: 面向过程的编写方法 1 2 3 ...