1、打开小程序开发工具，然后创建一个小程序项目；
2、打开index.js文件，然后添加chooseImage方法；
3、在后台编写一个接收文件上传的方法；
4、运行程序以后，点击图片就会d出选择文件尺拿春的对话框；
5、选择图片以后，就会在后台的程序输出中看到输出，代表上传已经传到后台；
6、在后台的相关文件夹中就可以看到了上传的文件。
微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使陵耐用的应用，它实现敏乎了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。
微信小程序裁剪组件，支持前端裁剪和后端裁剪两种方式
1.前端裁剪：将裁剪框指定的区域，单独生成图片，获取裁剪图片的临时文件路径
2.后端裁剪：获取裁剪框相对于原图的像素坐标位置，将裁袭尺迅剪区域坐标以及原图临时文件路径，传到后端进行图片裁剪
https://gitee.com/gnliscream/image-cropper
使用微信小程序自定义组件开发
小程序自定义组件官拍此网： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
添加image-cropper标签，如下
可以在image-cropper标签内添加 *** 作按钮，如下
首先需要在onLoad方法中，设置裁剪标签属性
然后添加按钮相应的绑定方法
获取到的res如下
获取到的裁剪参数的对应关系图
获取到裁困握剪参数后，将原图以及裁剪参数传到后台进行裁剪
2.获取裁剪图片地址
获取到的res如下
有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有巧举专门的选择图片接口，
wx.chooseImage(OBJECT)
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
need-to-insert-img
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
/孝饥碧/ 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
肢液 // ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
need-to-insert-img
need-to-insert-img
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
wx.getImageInfo(OBJECT)
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）