1、首先需要到upng.js,然后upng.js需要pako.js,先一并下载了

2、然后就可以直接用了,具体代码如下:

<!--pages/base/base.wxml-->
<canvas class='canvas' id='scannerCanvas' canvas-id='scannerCanvas' disable-scroll="true" style="height:{{height}}px;width:{{width}}px"/>
<view class="btns">
<view bindtap="chooseImg">选择</view>
<view>确定</view>
</view>
<text>{{time}}</text>
// js

const upng = require('../../utils/UPNG.js');

Page({

  /**
* 页面的初始数据
*/
data: {
width:360,
height:360,
time:""
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
wx.getSystemInfo({
success: res => {
this.setData({
height: res.windowHeight-80,
width: res.windowWidth
});
}
});
}, // 选择照片
chooseImg:function(){
var start = (new Date()).getTime()
wx.chooseImage({
count:1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
var tempFilePaths = res.tempFilePaths[0]
var canvas = wx.createCanvasContext('scannerCanvas')
// 1. 绘制图片至canvas
canvas.drawImage(tempFilePaths, 0, 0, this.data.width, this.data.height )
// 绘制完成后执行回调,API 1.7.0
canvas.draw(false, () => {
// 2. 获取图像数据, API 1.9.0
wx.canvasGetImageData({
canvasId: 'scannerCanvas',
x: 0,
y: 0,
width: this.data.width,
height: this.data.height,
success : (res) => {
let platform = wx.getSystemInfoSync().platform
if (platform == 'ios') {
// 兼容处理:ios获取的图片上下颠倒
res = this.reverseImgData(res)
}
// 3. png编码
let pngData = upng.encode([res.data.buffer], this.data.width, this.data.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
this.setData({
time:(new Date()).getTime()-start
})
}
})
})
}
})
}, // 图片颠倒
reverseImgData(res) {
var w = res.width
var h = res.height
let con = 0
for (var i = 0; i < h / 2; i++) {
for (var j = 0; j < w * 4; j++) {
con = res.data[i * w * 4 + j]
res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
res.data[(h - i - 1) * w * 4 + j] = con
}
}
return res
},
})
/* wxss */
.btns{
display: flex;
}
.btns>view{
width: 50%;
text-align: center;
line-height: 50px;
}
.btns>view:first-child{
border-right: 2rpx solid #ddd;
box-sizing: border-box;
}
text{
text-align: center;
width: 100%;
line-height: 30px;
display:block;
}

  

小程序把图片转换成base64的更多相关文章

  1. delphi将图片转换成Base64编码函数

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  2. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  3. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  4. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  5. Base64字符保存图片,图片转换成Base64字符编码

    //文件转换成Base64编码 public static String getFileBase64Str(String filePath) throws IOException { String f ...

  6. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  7. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  8. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. lua 把图片转换成base64

    调用实例 require("ZZBase64") local files local file = io.open("E:\\2342.jpg","r ...

随机推荐

  1. linux命令(43):cal命令

    cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历.“阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”. 1.命令格式: cal  ...

  2. BNU - 49102

    进化之地(Evoland) Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO for ...

  3. hdu 2818(并查集,带权更新)

    Building Block Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. Largest Number——STL的深层理解

    Given a list of non negative integers, arrange them such that they form the largest number. For exam ...

  5. AC日记——「SCOI2016」背单词 LiBreOJ 2012

    #2012. 「SCOI2016」背单词 思路: Orz: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1 ...

  6. AC日记——[Sdoi2010]粟粟的书架 bzoj 1926

    1926 思路: 主席树+二分水题: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 #defi ...

  7. 35.Spark系统运行内幕机制循环流程

    一:TaskScheduler原理解密 1,  DAGScheduler在提交TaskSet给底层调度器的时候是面向接口TaskScheduler的,这符合面向对象中依赖抽象而不依赖的原则,带来底层资 ...

  8. Struts2自定义转换器输入生日日期输出年、月、日、年龄

    BirthAction.java package com.action; import java.util.Calendar; import java.util.Map; import com.bea ...

  9. RedisDesktopManager-0.9.3 for windows (转)

    redis数据库的可视化工具 官方出了RedisDesktopManager-0.9.8版本后要购买了.之前自用的Windows版本0.9.3.817有需要的可以使用.解压直接启动即可.主要以备自用! ...

  10. 倚天屠龙(一):妙用IDA Pro--利用IDAPython编写调试插件

    一:前言 虽然静态分析有Radare2,Hopper这种新星之秀,动态调试有Ollydbg,Windbg这种老牌霸主,但是IDA Pro仍然是大部分二进制安全工程师最喜爱的工具,除了价格过于昂贵,基本 ...