Browse Source

canvas 2D album页面使用完成

我是傻逼我是傻逼我是傻逼
canvas-id是旧接口的属性,忘记改了,
另修改preview界面布局,
统一了代码风格

TODO:index页面布局优化
master
Naomi 7 months ago
parent
commit
173ca071ae
12 changed files with 206 additions and 222 deletions
  1. +1
    -1
      app.js
  2. +2
    -2
      app.json
  3. +0
    -0
      lib/promise/method.js
  4. +0
    -0
      lib/promise/promise.js
  5. +1
    -1
      lib/util.js
  6. +111
    -95
      pages/album/album.js
  7. +4
    -4
      pages/album/album.wxml
  8. +54
    -52
      pages/index/index.js
  9. +2
    -2
      pages/index/index.wxml
  10. +9
    -34
      pages/preview/preview.js
  11. +10
    -10
      pages/preview/preview.wxml
  12. +12
    -21
      pages/preview/preview.wxss

+ 1
- 1
app.js View File

@ -1,4 +1,4 @@
import { promisifyAll } from './lib/api-promise/promise';
import { promisifyAll } from './lib/promise/promise';
var COS = require('./lib/cos.js');
const app = getApp();


+ 2
- 2
app.json View File

@ -2,8 +2,8 @@
"cloud": true,
"pages": [
"pages/index/index",
"pages/album/album",
"pages/preview/preview"
"pages/preview/preview",
"pages/album/album"
],
"window": {
"navigationBarBackgroundColor": "#9dbdc6",


lib/api-promise/method.js → lib/promise/method.js View File


lib/api-promise/promise.js → lib/promise/promise.js View File


+ 1
- 1
lib/util.js View File

@ -21,7 +21,7 @@ module.exports = {
type: 'next'
}, 0, 0];
}
} else if (truncated == 0) {
} else if (truncated == 0) { //图片列表是否截断
if (col == 0 || col == 1) {
matrix[row][col + 1] = {
type: 'done'


+ 111
- 95
pages/album/album.js View File

@ -16,7 +16,10 @@ Page({
deeper: false,
// 加载框
loading: false,
loading: {
enable: false,
text: "加载中"
},
// Toast信息
message: {
@ -127,7 +130,10 @@ Page({
getAlbumList(callback, marker = "") {
let that = this;
that.setData({
loading: true,
loading: {
enable: true,
text: "加载中"
},
})
var prefix = that.data.folder[that.data.selectFolder];
if (prefix == '/')
@ -152,12 +158,18 @@ Page({
var list = (data && data.Contents || [])
.map(item => 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + util.camSafeUrlEncode(item.Key).replace(/%2F/g, '/')).filter(item => /\.(jpg|png|gif|jpeg|pjp|pjpeg|jfif|xbm|tif|svgz|webp|ico|bmp|svg)$/.test(item) && /^(?!.*CDN).*$/.test(item));
that.setData({
loading: false,
loading: {
enable: false,
text: "加载中"
},
})
callback(list);
} else {
that.setData({
loading: false,
loading: {
enable: false,
text: "加载中"
},
})
callback([]);
}
@ -187,72 +199,70 @@ Page({
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
that.setData({
loading: true,
upload: res.tempFilePaths.map(item => {
return {
path: item,
canvasWidth: 0,
canvasHeight: 0,
sourceType: ['album', 'camera']
}).then(res => {
that.setData({
loading: {
enable: true,
text: "上传中"
},
upload: res.tempFilePaths.map(item => {
return {
path: item,
canvasWidth: 0,
canvasHeight: 0,
}
}),
message: {
enable: true,
type: "info",
text: "正在上传图片…",
delay: 1000,
},
})
return res.tempFilePaths
}).then(res => {
res.forEach((filePath, index) => {
that.getCanvasDetail(filePath, index)
.then(res => that.getCanvasImg(res))
.then(res => util.checkSafePic(res))
.then(res => {
if (res) {
var Key = util.getRandFileName(filePath);
filePath && cos.postObject({
Bucket: config.Bucket,
Region: config.Region,
Key: Key,
FilePath: filePath
}, function (err, data) {
if (data) {
let albumList = that.data.albumList;
// debugger;
albumList.unshift('https://' + data.Location);
that.setData({
albumList,
});
that.renderAlbumList();
}
})
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "第" + (index + 1).toString() + "张图片不合法",
delay: 3000,
},
})
}
}),
message: {
enable: true,
type: "info",
text: "正在上传图片…",
delay: 1000,
},
})
res.tempFilePaths.forEach(function (filePath, index) {
that.getCanvasDetail(filePath, index)
.then(res => that.getCanvasImg(res)
.then(res => {
console.log(res)
util.checkSafePic(res).then(res => {
if (res) {
var Key = util.getRandFileName(filePath);
filePath && cos.postObject({
Bucket: config.Bucket,
Region: config.Region,
Key: Key,
FilePath: filePath
}, function (err, data) {
if (data) {
let albumList = that.data.albumList;
// debugger;
albumList.unshift('https://' + data.Location);
that.setData({
albumList,
});
that.renderAlbumList();
}
});
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "第" + (index + 1).toString() + "张图片不合法",
delay: 3000,
},
})
}
})
}))
})
that.setData({
loading: false
})
}, fail: (err) => {
console.log(err)
})
})
}).then(() => that.setData({
loading: {
enable: false,
text: "加载中"
}
})
}))
},
// 计算图片缩小后的尺寸
@ -295,29 +305,42 @@ Page({
},
// 使用canvas画布,获取压缩后的图片
getCanvasImg(res) {
async getCanvasImg(res) {
var that = this;
return new Promise((resolve, reject) => {
//----------绘制图形并取出图片路径--------------
var ctx = wx.createCanvasContext('canvas-' + res.index)
ctx.drawImage(res.path, 0, 0, res.canvasWidth, res.canvasHeight)
ctx.draw(setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'canvas-' + res.index,
destWidth: res.anvasWidth,
destHeight: res.canvasHeight,
quality: 0.8,
success: function (res) {
//最终图片路径
console.log(res)
resolve(res.tempFilePath)
},
fail: function (res) {
console.log(res.errMsg)
//----------绘制图形并取出图片路径--------------
const query = wx.createSelectorQuery();
const canvas = await new Promise((resolve, reject) => {
query.select('#canvas-' + res.index)
.fields({ node: true, size: true })
.exec(async (item) => {
const width = item[0].width
const height = item[0].height
const canvas = item[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
const image = canvas.createImage();//创建image
image.src = res.path;//指定路径为getImageInfo的文件
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height)//图片加载完成时draw
resolve(canvas)
}
}, that)
}, 500)) //留一定的时间绘制canvas
})
})
return wx.canvasToTempFilePath({
canvas: canvas,
quality: 0.8,
}, that).then(res => {
console.log(res.tempFilePath)
return res.tempFilePath
})
},
// 进入预览模式
@ -626,11 +649,4 @@ Page({
}, that.data.marker);
},
messageGone() {
var that = this
this.data.message.enable = false
this.setData({
message: that.data.message
})
}
});

+ 4
- 4
pages/album/album.wxml View File

@ -1,5 +1,5 @@
<!-- 压缩图片用的画布 -->
<canvas wx:for='{{upload}}' wx:for-index="index" canvas-id='canvas-{{index}}' wx:key="index" style="width:{{item.canvasWidth}}px;height:{{item.canvasHeight}}px;position:absolute;top:-999999px;left:-999999px;"></canvas>
<canvas wx:for='{{upload}}' wx:for-index="index" type="2d" id='canvas-{{index}}' wx:key="index" style="width:{{item.canvasWidth}}px;height:{{item.canvasHeight}}px;position:absolute;top:-999999px;left:-999999px;"></canvas>
<!-- 自定义导航栏 -->
<view wx:if="{{!previewMode}}" class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
@ -18,9 +18,9 @@
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>
<!-- 加载框 -->
<view wx:if="{{loading}}" class="loading">
<view wx:if="{{loading.enable}}" class="loading">
<image src="/images/loading.gif" mode="aspectFit" />
<text decode="true">&nbsp;加载中……</text>
<text decode="true">&nbsp;{{loading.text}}……</text>
</view>
<!-- 图片列表容器 -->
@ -93,7 +93,7 @@
</mp-actionSheet>
<!-- Toast消息框 -->
<mp-toptips msg="{{message.text}}" type="{{message.type}}" show="{{message.enable}}" delay="{{message.delay}}" bindhide="messageGone"></mp-toptips>
<mp-toptips msg="{{message.text}}" type="{{message.type}}" show="{{message.enable}}" delay="{{message.delay}}"></mp-toptips>
<!-- 返回对话框 -->
<mp-dialog title="返回首页" show="{{back}}" bindbuttontap="confirmBack" buttons="{{[{text: '取消'}, {text: '确认'}]}}">


+ 54
- 52
pages/index/index.js View File

@ -18,65 +18,67 @@ Page({
// 前往相册页
uploadImage() {
var that = this
var that = this;
that.setData({
message: {
enable: true,
type: "info",
text: "正在上传图片…",
delay: 3000,
},
});
wx.chooseImage({
count: 1,
camera: 'back',
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
}).then(res => {
var filePath = res.tempFilePaths[0];
that.getCanvasDetail(filePath)
.then(res => that.getCanvasImg(res))
.then(res => util.checkSafePic(res))
.then(res => {
if (res) {
//图片正常
if (filePath) {
var Key = util.getRandFileName(filePath);
cos.postObject({
Bucket: config.Bucket,
Region: config.Region,
Key: Key,
FilePath: filePath,
}, function (err, data) {
that.setData({
message: {
enable: true,
type: "info",
text: "正在上传图片…",
delay: 3000,
},
})
if (data && data.Location) {
wx.navigateTo({
url: '../preview/preview?type=image&url=' + encodeURIComponent('https://' + data.Location)
});
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "上传失败",
delay: 3000,
},
})
}
});
success: res => {
var filePath = res.tempFilePaths[0];
that.getCanvasDetail(filePath)
.then(res => that.getCanvasImg(res))
.then(res => util.checkSafePic(res))
.then(res => {
if (res) {
//图片正常
if (filePath) {
var Key = util.getRandFileName(filePath);
cos.postObject({
Bucket: config.Bucket,
Region: config.Region,
Key: Key,
FilePath: filePath,
}, function (err, data) {
if (data && data.Location) {
wx.navigateTo({
url: '../preview/preview?type=image&url=' + encodeURIComponent('https://' + data.Location)
});
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "上传失败",
delay: 3000,
},
})
}
});
}
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "图片违规违法",
delay: 3000,
},
})
}
} else {
that.setData({
message: {
enable: true,
type: "error",
text: "图片违规违法",
delay: 3000,
},
})
}
})
})
})
}
});
},
// 前往相册页
uploadVideo() {
wx.chooseVideo({


+ 2
- 2
pages/index/index.wxml View File

@ -8,13 +8,13 @@
<view class="bottom"></view>
<view class="main">
<view class="page-title">文件上传</view>
<view class="page-tips1">CDN流量仅有10G</view>
<view class="page-tips1">不可上传违规资源</view>
<view class="page-btn-wrap">
<button class="page-btn" bindtap="uploadImage">上传图片</button>
<button class="page-btn" bindtap="uploadVideo">上传视频</button>
</view>
<view class="page-title">云相册</view>
<view class="page-tips1">图片预览均缩放+裁剪,下载为原尺寸</view>
<view class="page-tips1">图片预览均缩放+裁剪,下载为原尺寸</view>
<view class="page-btn-wrap">
<button class="page-btn" bindtap="gotoAlbum">云相册</button>
</view>


+ 9
- 34
pages/preview/preview.js View File

@ -1,10 +1,7 @@
Page({
data: {
type: 'image',
url: '',
formatUrl: '',
view: '',
showPreview: false,
url: ''
},
onShareAppMessage: function (res) {
var typeMap = {
@ -20,43 +17,21 @@ Page({
}
return data;
},
onShow() {
this.setData({
showPreview: false
});
var tmp = decodeURIComponent(this.options.url);
tmp = "https://img.naomi.pub/" + tmp.substring(tmp.lastIndexOf('/') + 1, tmp.length)
onLoad() {
this.setData({
type: this.options.type || 'image',
url: decodeURIComponent(this.options.url) || '',
view: decodeURIComponent(this.options.url) + '!preview',
formatUrl: tmp,
});
},
showPreviewBox() {
this.setData({
showPreview: true
});
},
copyLink() {
wx.setClipboardData({
data: this.data.formatUrl || '',
success: function () {
wx.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
});
},
fail: function () {
wx.showToast({
title: '复制失败',
icon: 'error',
duration: 2000
});
},
});
var tmp = decodeURIComponent(this.data.url);
tmp = "https://img.naomi.pub/" + tmp.substring(tmp.lastIndexOf('/') + 1, tmp.length)
wx.setClipboardData({ data: tmp });
},
saveImage() {
wx.downloadFile({
url: this.data.url,


+ 10
- 10
pages/preview/preview.wxml View File

@ -1,19 +1,19 @@
<view class="main">
<view wx:if="{{url}}">
<view class="preview-success">上传成功</view>
<view class="preview-url">{{formatUrl}}</view>
<view class="top">
<icon type="success" size="64"></icon>
<text class="preview-success">上传成功</text>
</view>
<view class="preview-tips">复制 URL,可在浏览器中下载您上传的对象</view>
<view class="preview-button-wrap">
<button class="preview-button" bindtap="copyLink">复制链接</button>
<button class="preview-button" bindtap="saveImage">保存到本地</button>
</view>
<view wx:if="showPreview" class="preview-outer">
<view wx:if="{{url}}" class="preview-outer">
<view wx:if="{{type==='image'}}">
<image data-src="{{url}}" class="preview-image" src="{{view}}" mode="aspectFill"></image>
<image data-src="{{url}}" class="preview-image" src="{{url+'!preview'}}" mode="aspectFill"></image>
</view>
<view wx:else class="preview-inner">
<video data-src="{{url}}" class="preview-video" src="{{url}}" mode="aspectFill"></video>
</view>
</view>
<view class="preview-button-wrap">
<button class="preview-button" bindtap="copyLink">复制图片链接</button>
<button class="preview-button" bindtap="saveImage">保存到本地</button>
</view>
</view>

+ 12
- 21
pages/preview/preview.wxss View File

@ -1,3 +1,10 @@
.top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.preview {
width: 100%;
height: 100%;
@ -5,28 +12,12 @@
}
.preview-success {
display: inline-block;
margin-top: 22rpx;
font-size: 40rpx;
}
.preview-url {
border: 1px solid #ddd;
padding: 16rpx;
background: #f7f7f7;
word-break: break-all;
font-size: 32rpx;
border-radius: 5rpx;
margin-top: 40rpx;
}
.preview-tips {
margin-top: 20rpx;
font-size: 30rpx;
color: #888;
}
.preview-button-wrap {
margin-top: 30rpx;
margin-top: 70rpx;
text-align: left;
}
@ -39,10 +30,10 @@
text-decoration: none;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
width: 280rpx;
width: 288rpx;
height: 85rpx;
background-color: #fff;
color: #2277da;
background-color: #eff3f5;
color: #f5756c;
line-height: 85rpx;
border-radius: 5rpx;
}


Loading…
Cancel
Save