Skip to content

N
nyx
Commit 2efbd11a by jscat
Options

nyx: 图片上传 

更新： 解决图片上传的尺寸和大小问题，目前是基本windowWidth来对图片进行尺寸变化
将尺寸变小。
parent a78257ff
正在显示 包含 169 行增加 和 66 行删除
增值产品-小程序及app/nyx-master/app.js
//app.js
//app.js
......@@ -345,9 +345,9 @@ App({
}
}
},
fail() {
fail(e) {
reject("failed on checkText")
console.log("failed", checkres);
console.log("failed");
}
})
},
......@@ -362,5 +362,4 @@ App({
return promise
},
})
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/discover/discover.js
// pages/kinds/kinds.js
// pages/kinds/kinds.js
......@@ -10,6 +10,7 @@ Page({
data: {
category: [ // 导航栏内容数据
{ name: '推荐', id: 'top' },
{ name: '问答', id: 'wenda' },
{ name: '复工', id: 'fugong' },
{ name: '心情', id: 'xinqing' },
{ name: '酒单', id: 'jiudan' },
......
增值产品-小程序及app/nyx-master/pages/discover/discover.wxss
/*
/*
......@@ -61,7 +61,7 @@
font-size: 17px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* display: -webkit-box; */
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin: 5px;
......@@ -79,7 +79,7 @@
margin-left: 0px;
text-align: center;
line-height: 38px;
font-size: 30rpx;
font-size: 28rpx;
}
.writer image{
width: 30px;
......@@ -87,7 +87,7 @@
border-radius: 50%;
}
.like{
margin-left: 10px;
margin-right: 2px;
display: flex;
}
.like image{
......
增值产品-小程序及app/nyx-master/pages/post/post.js
// pages/post/post.js
// pages/post/post.js
......@@ -38,7 +38,10 @@ Page({
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
//定义图片尺寸
imageSize: '',
},
sourceTypeChange(e) {
......@@ -64,8 +67,20 @@ Page({
// Page Flow
navigateToEdit() {
wx.navigateTo({ url: './edit/edit' })
},
var _this = this;
var newFilePaths = _this.data.photoArray
let promise = app.onCheckPic(newFilePaths)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_" + value)
//同步更新全局变量
app.globalData.postData.photoArray = newFilePaths
wx.navigateTo({ url: './edit/edit' })
});
},
// Date Flow
/*
......@@ -73,28 +88,26 @@ Page({
step2: 添加描述文字，选择tag
step3: 上传
在chooseImage时候就开始验证图片是否合法合规
1. chooseImage
2. 进行图片编辑
3. 点击下一步验证图片是否合法合规 navigateToEdit
通过size或其他方式判断是否进行图片处理（裁切，填满，留白，充满）
1) > 2M会出现45002， content size out of limit错误
2) 自动裁剪成4:3 或 1:1
*/
addPhoto: function (res) {
var _this = this;
_this.setData({
photoArray: []
})
console.log("===this is addPhoto");
wx.chooseImage({
sizeType: ['original, compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
// 文件的临时路径，在小程序本次启动期间可以正常使用
// tips,如果想长期保持，可通过wx.saveFile
var tempFilePaths = res.tempFilePaths;
let promise = app.onCheckPic(tempFilePaths)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_" + value)
_this.saveData(tempFilePaths)
});
var canvasId = "photoCanvasId";
_this.onEditPic(res, canvasId)
}
})
},
......@@ -107,13 +120,74 @@ Page({
},
//保存图形的tmp地址
saveData(tempFilePaths){
saveData(newFilePaths){
var _this = this;
console.log("===saveData")
console.log("===saveData", newFilePaths)
_this.setData({
photoArray: tempFilePaths
photoArray: newFilePaths
})
app.globalData.postData.photoArray = tempFilePaths;
app.globalData.postData.photoArray = newFilePaths;
},
//小程序图片处理主函数
editPic(tempFilePaths, index, canvasId) {
var _this = this;
var photoArray = _this.data.photoArray
if (index < tempFilePaths.length){
var pic = tempFilePaths[index]
wx.getImageInfo({
src: pic, //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径,
success: function (res) {
// util.imageUtil 用于计算长宽比
var imageSize = util.imageUtil(res);
console.log("success on getImageInfo_"+index);
console.log(imageSize)
_this.setData({
imageSize: imageSize
})
const ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(pic, 0, 0, imageSize.imageWidth, imageSize.imageHeight);
ctx.draw(false, function () {
console.log("==enter draw_"+index);
wx.canvasToTempFilePath({
canvasId: canvasId,
fileType:"jpg",
success: function (res) {
console.log("===success_", res)
console.log("===第"+index+"图处理成功")
index = index + 1
_this.editPic(tempFilePaths, index, canvasId); // 用于多个图片压缩
photoArray.push(res.tempFilePath)
_this.setData({
photoArray: photoArray
})
},
fail: function (e) {
console.log("===第"+index+"图处理失败")
}
});
});
},
fail: function(e) {
console.log("failed", e);
},
complete: function(e) {
console.log("complete on getImageInfo_"+index, e);
}
})
}
},
// 通过size或其他方式判断是否进行图片处理（裁切，填满，留白，充满）
// 1) > 2M会出现45002， content size out of limit错误
// 2) 自动裁剪成4:3(高/宽 1080) 或 1:1
// refer1 微信小程序图片压缩 https://www.jianshu.com/p/1b8a1e96a6d5
// refer2 小程序压缩图片（canvas） https://www.jianshu.com/p/ec1f95008dce
onEditPic(res, canvasId) {
var _this = this;
var tempFilePaths = res.tempFilePaths;
var index = 0;
_this.editPic(tempFilePaths, index, canvasId)
}
})
增值产品-小程序及app/nyx-master/pages/post/post.wxml
<view class="page" style="height:100%;width:100%">
<view class="page" style="height:100%;width:100%">
<view class="page" style="height:100%;width:100%">
<block>
<navigator url="/pages/post/edit/edit" hover-class="navigator-hover">
<button type="default">下一步</button>
</navigator>
<button type="default" bindtap="navigateToEdit">下一步</button>
</block>
<form>
<!-- <view class="weui-cells weui-cells_after-title"> -->
<!-- 选择图片来源 -->
<!-- <view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">图片来源</view>
</view>
<view class="weui-cell__bd">
<picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}" mode="selector">
<view class="weui-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
</view> -->
<!-- 选择图片质量 -->
<!-- <view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">图片质量</view>
</view>
<view class="weui-cell__bd">
<picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}" mode="selector">
<view class="weui-input">{{sizeType[sizeTypeIndex]}}</view>
</picker>
</view>
</view>
</view> -->
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
......@@ -57,4 +30,6 @@
</view>
</form>
<canvas canvas-id='photoCanvasId' class='myCanvas' style='width:{{imageSize.imageWidth}}px;height:{{imageSize.imageHeight}}px'>
</canvas>
</view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/post/post.wxss
page{
page{
......@@ -56,4 +56,12 @@ page{
color:#dbdbdb;
}
/*
隐藏 canvas，避免显示错误
*/
.myCanvas {
position: absolute;
top: -9999px;
left: -9999px;
}
增值产品-小程序及app/nyx-master/pages/post/submit/submit.js
// pages/post/submit/submit.js
// pages/post/submit/submit.js
......@@ -102,6 +102,10 @@ Page({
//上传照片(阿里云)
uploadAli: function (tag, title, content, photoArr) {
var _this = this;
console.log("===uploadAli_data_tag: ",tag)
console.log("===uploadAli_data_title: ",title)
console.log("===uploadAli_data_content: ",content)
console.log("===uploadAli_data_photoArr: ",photoArr)
var promise = Promise.all(photoArr.map((pic, index) => {
//pic是多图上传模式中的单张图片 index => 0 : length-1
console.log(pic)
......
增值产品-小程序及app/nyx-master/project.config.json
{
{
......@@ -17,7 +17,9 @@
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
"libVersion": "2.9.4",
......
增值产品-小程序及app/nyx-master/utils/util.js
function formatTime(date) {
function formatTime(date) {
......@@ -31,8 +31,48 @@ function wxuuid () {
}
function imageUtil(e) {
var imageSize = {};
var originalWidth = e.width;//图片原始宽
var originalHeight = e.height;//图片原始高
var originalScale = originalHeight / originalWidth;//图片高宽比
console.log('原始宽: ' + originalWidth)
console.log('原始高: ' + originalHeight)
console.log('宽高比' + originalScale)
//获取屏幕宽高
wx.getSystemInfo({
success: function (res) {
// canvas 基础宽高调为 2 倍，避免图片压缩程度过高导致图片字体显示不清楚
var windowWidth = res.windowWidth * 2;
var windowHeight = res.windowHeight * 2;
var windowscale = windowHeight / windowWidth;//屏幕高宽比
// 图片尺寸大于设备
if (originalWidth > res.windowWidth || originalHeight > res.windowHeight) {
if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比
//图片缩放后的宽为屏幕宽
imageSize.imageWidth = windowWidth;
imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
} else {//图片高宽比大于屏幕高宽比
//图片缩放后的高为屏幕高
imageSize.imageHeight = windowHeight;
imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
}
} else {
imageSize.imageHeight = originalHeight;
imageSize.imageWidth = originalWidth;
}
}
})
console.log('缩放后的宽: ' + imageSize.imageWidth)
console.log('缩放后的高: ' + imageSize.imageHeight)
return imageSize;
}
module.exports = {
formatTime: formatTime,
wxuuid: wxuuid
wxuuid: wxuuid,
imageUtil: imageUtil
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论