这里的操作只有
- 点击放大并长按下载
- 下载图片或下载视频
- 生成海报图
下载图片
海报图
点击放大并长按下载
<template>
<view>
<view class="padd-b-11" v-for="(item, index) in list" :key="index">
<image :src="item.image" @click="imgPreView(item.image, index)"></image>
</view>
</view>
</template>
<script>
...
data: {
return() {
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
],
}
},
methods: {
imgPreView(item, index) {
// 如果是多图，就用这个
// let photoList = this.photos.map(item => {
// return item.src;
// });
// 这里是单图
let photoList = [item]
console.log(item, photoList);
uni.previewImage({
// 多图用这个做索引
// current: index,
// 单图
current: 0,
urls: photoList,
success(re) {
console.log('ok', re,index);
},
fail(err) {
console.log(err);
}
});
},
</script>
下载图片或下载视频
使用方法
- 第一步
在main.js 导入并且挂载
import imgDown from "./utils/download.js"
Vue.prototype.$imgDown = imgDown
- 第二步
// 添加事件
down(item) {
let url = '';
// 视频就用true
let is_video = false;
// url 下载的地址
this.$imgDown.saveImage(url,is_video)
},
- 第三步
需要这个文件
// 下载
// ### saveImage 用这个
const app = getApp()
export default {
/**
* 保存图片
* url 图片url地址
* is_video是否视频
*/
saveImage: function(url,is_video) {
let that = this;
// 向用户发起授权请求
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
// 已授权
that.downLoadImg(url,is_video);
},
fail: () => {
// 拒绝授权，获取当前设置
uni.getSetting({
success: (result) => {
if (!result.authSetting['scope.writePhotosAlbum']) {
that.isAuth()
}
}
});
}
})
},
/**
* 下载资源，保存图片到系统相册
*/
downLoadImg: function(url,is_video) {
uni.showLoading({
title: '加载中'
});
uni.downloadFile({
url : url,
success: (res) => {
uni.hideLoading();
if (res.statusCode === 200) {
if(is_video==false){
// 图片下载
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "已保存到相册",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败，请稍后重试",
icon: "none"
});
}
});
}else{
// 视频下载
uni.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "已保存到相册",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败，请稍后重试",
icon: "none"
});
}
})
}
}else {
uni.showToast({title:"资源格式错误，请联系管理员",icon: "none"});
}
},
fail: (err) => {
uni.showToast({title: "保存失败，请联系管理员",icon: "none"});
}
})
},
/*
* 引导用户开启权限
*/
isAuth: function() {
uni.showModal({
content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (result) => {
console.log(result.authSetting);
}
});
}
}
});
},
}
生成海报图
没用过canvas,又赶时间，只好用插件慢慢改 插件地址 ext.dcloud.net.cn/plugin?id=5…
只说几个点
1. 下载插件的示例，然后改数值。
2. data() {
return {
// ========== canvas =====
// 画布的宽高
canvasStyle: {
width: '750rpx',
height: '1225rpx'
},
}}
3. 修改坐标的时候，注意他们的callback，有些callback是以其他坐标为起始点。
4. 如果想要自己设置坐标，可以直接设置值。
callback: (before, all) => {
// 上一个坐标
const goodsPrice = all.find(item => item.name === 'goodsPrice')
const { ey } = goodsPrice
return {
// 上一个Y轴点
y: ey + 30,
// 自己设置的点
x: 50
}
}
5. 画文字
const shareText = {
type: 'text',
// 这里设置文字内容
text: ' ',
color: '#9E9E9E',
font: {
size: 50
},
callback: (before, all) => {
return {
x: 100,
y: 80
}
}
}
6. 画图片
const MyIcon = {
type: 'image',
drawType: 'arc',
// newIcon是图片地址
src: newIcon,
h: 150,
w: 150,
callback: (before, all) => {
return {
x: 40,
y: 40
}
}
}
7. 不要忘记导入和导出
8. 可以在成功的后面使用下载函数，把这个生成的图片保存
