小程序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 ...
随机推荐
- AndroidInject项目使用动态代理增加对网络请求的支持
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3540427.html AndroidInject项目是我写的一 ...
- 通过使用Chrome的开发者工具来学习JavaScript
本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”. 闭包 首先要讲的 ...
- jquery美化滚动条插件jscrollpane应用(转)
原文地址:http://www.jqcool.net/jquery-jscrollpane.html jScrollPane是一个设计非常灵活的跨浏览器的jQuery ,它将浏览器的默认滚动条或是元素 ...
- DNS域名解析过程,域名的认识
DNS域名解析过程 参考知乎:https://www.zhihu.com/question/23042131 当你通过浏览器输入url访问资源时,会请求DNS解析域名成对应的IP地址,由IP地址在去与 ...
- 《剑指offer》(第二版)Java实现
Github链接: <剑指offer>(第二版)Java实现 欢迎star!
- spring中的传播性 个人认为就是对方法的设置 其作用能传播到里面包含的方法上
spring中的传播性 个人认为就是对方法的设置 其作用能传播到里面包含的方法上
- 字符串格式化(百分号&;format)
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号方式: %[(name)][flags][width].[precision]typecode [ ]:表示 ...
- Android实战简易教程-第二十三枪(基于Baas的用户注冊验证username是否反复功能!)
接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...
- 树莓派搭建Git服务器
目录 安装ssh 安装git-core 新增git用户 设置git用户目录 [服务端]设置git仓库 [客户端]设置git仓库 设置ssh登录 安装ssh sudo apt-get install s ...
- linux系统使用过程遇到的bug
使用windows与ubuntu双系统,重装windows系统后需要修复ubuntu grub reference ubuntu系统中挂载的windows硬盘点不开 需要重新挂载 reference ...