Skip to content

N
nyx
Commit 2efbd11a by jscat
Options

nyx: 图片上传 

更新： 解决图片上传的尺寸和大小问题，目前是基本windowWidth来对图片进行尺寸变化
将尺寸变小。
parent a78257ff
正在显示 包含 167 行增加 和 64 行删除
增值产品-小程序及app/nyx-master/app.js
//app.js //app.js
...@@ -345,9 +345,9 @@ App({ ...@@ -345,9 +345,9 @@ App({
} }
} }
}, },
fail() { fail(e) {
reject("failed on checkText") reject("failed on checkText")
console.log("failed", checkres); console.log("failed");
} }
}) })
}, },
...@@ -362,5 +362,4 @@ App({ ...@@ -362,5 +362,4 @@ App({
return promise 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({ ...@@ -10,6 +10,7 @@ Page({
data: { data: {
category: [ // 导航栏内容数据 category: [ // 导航栏内容数据
{ name: '推荐', id: 'top' }, { name: '推荐', id: 'top' },
{ name: '问答', id: 'wenda' },
{ name: '复工', id: 'fugong' }, { name: '复工', id: 'fugong' },
{ name: '心情', id: 'xinqing' }, { name: '心情', id: 'xinqing' },
{ name: '酒单', id: 'jiudan' }, { name: '酒单', id: 'jiudan' },
......
增值产品-小程序及app/nyx-master/pages/discover/discover.wxss
/* /*
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
font-size: 17px; font-size: 17px;
overflow : hidden; overflow : hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; /* display: -webkit-box; */
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin: 5px; margin: 5px;
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
margin-left: 0px; margin-left: 0px;
text-align: center; text-align: center;
line-height: 38px; line-height: 38px;
font-size: 30rpx; font-size: 28rpx;
} }
.writer image{ .writer image{
width: 30px; width: 30px;
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
border-radius: 50%; border-radius: 50%;
} }
.like{ .like{
margin-left: 10px; margin-right: 2px;
display: flex; display: flex;
} }
.like image{ .like image{
......
增值产品-小程序及app/nyx-master/pages/post/post.js
// pages/post/post.js // pages/post/post.js
...@@ -38,7 +38,10 @@ Page({ ...@@ -38,7 +38,10 @@ Page({
sizeType: ['压缩', '原图', '压缩或原图'], sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8, 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) { sourceTypeChange(e) {
...@@ -64,7 +67,19 @@ Page({ ...@@ -64,7 +67,19 @@ Page({
// Page Flow // Page Flow
navigateToEdit() { navigateToEdit() {
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' }) wx.navigateTo({ url: './edit/edit' })
});
}, },
// Date Flow // Date Flow
...@@ -73,28 +88,26 @@ Page({ ...@@ -73,28 +88,26 @@ Page({
step2: 添加描述文字，选择tag step2: 添加描述文字，选择tag
step3: 上传 step3: 上传
在chooseImage时候就开始验证图片是否合法合规 1. chooseImage
2. 进行图片编辑
3. 点击下一步验证图片是否合法合规 navigateToEdit
通过size或其他方式判断是否进行图片处理（裁切，填满，留白，充满）
1) > 2M会出现45002， content size out of limit错误
2) 自动裁剪成4:3 或 1:1
*/ */
addPhoto: function (res) { addPhoto: function (res) {
var _this = this; var _this = this;
_this.setData({
photoArray: []
})
console.log("===this is addPhoto"); console.log("===this is addPhoto");
wx.chooseImage({ wx.chooseImage({
sizeType: ['original, compressed'], // 可以指定是原图还是压缩图，默认二者都有 sizeType: ['original, compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) { success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var canvasId = "photoCanvasId";
// 文件的临时路径，在小程序本次启动期间可以正常使用 _this.onEditPic(res, canvasId)
// 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)
});
} }
}) })
}, },
...@@ -107,13 +120,74 @@ Page({ ...@@ -107,13 +120,74 @@ Page({
}, },
//保存图形的tmp地址 //保存图形的tmp地址
saveData(tempFilePaths){ saveData(newFilePaths){
var _this = this;
console.log("===saveData", newFilePaths)
_this.setData({
photoArray: newFilePaths
})
app.globalData.postData.photoArray = newFilePaths;
},
//小程序图片处理主函数
editPic(tempFilePaths, index, canvasId) {
var _this = this; var _this = this;
console.log("===saveData") 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({ _this.setData({
photoArray: tempFilePaths 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);
}
}) })
app.globalData.postData.photoArray = tempFilePaths; }
},
// 通过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%"> <view class="page" style="height:100%;width:100%">
<block> <block>
<navigator url="/pages/post/edit/edit" hover-class="navigator-hover"> <button type="default" bindtap="navigateToEdit">下一步</button>
<button type="default">下一步</button>
</navigator>
</block> </block>
<form> <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-cells">
<view class="weui-cell"> <view class="weui-cell">
<view class="weui-cell__bd"> <view class="weui-cell__bd">
...@@ -57,4 +30,6 @@ ...@@ -57,4 +30,6 @@
</view> </view>
</form> </form>
<canvas canvas-id='photoCanvasId' class='myCanvas' style='width:{{imageSize.imageWidth}}px;height:{{imageSize.imageHeight}}px'>
</canvas>
</view> </view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/post/post.wxss
page{ page{
...@@ -56,4 +56,12 @@ page{ ...@@ -56,4 +56,12 @@ page{
color:#dbdbdb; 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({ ...@@ -102,6 +102,10 @@ Page({
//上传照片(阿里云) //上传照片(阿里云)
uploadAli: function (tag, title, content, photoArr) { uploadAli: function (tag, title, content, photoArr) {
var _this = this; 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) => { var promise = Promise.all(photoArr.map((pic, index) => {
//pic是多图上传模式中的单张图片 index => 0 : length-1 //pic是多图上传模式中的单张图片 index => 0 : length-1
console.log(pic) console.log(pic)
......
增值产品-小程序及app/nyx-master/project.config.json
{ {
...@@ -17,7 +17,9 @@ ...@@ -17,7 +17,9 @@
"ignore": [], "ignore": [],
"disablePlugins": [], "disablePlugins": [],
"outputPath": "" "outputPath": ""
} },
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.9.4", "libVersion": "2.9.4",
......
增值产品-小程序及app/nyx-master/utils/util.js
function formatTime(date) { function formatTime(date) {
...@@ -31,8 +31,48 @@ function wxuuid () { ...@@ -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 = { module.exports = {
formatTime: formatTime, formatTime: formatTime,
wxuuid: wxuuid wxuuid: wxuuid,
imageUtil: imageUtil
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论