123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679 |
- <template>
- <div
- class="image-previewer"
- :class="[isMobile && 'image-previewer-h5']"
- >
- <div
- ref="image"
- class="image-wrapper"
- @touchstart.stop="handleTouchStart"
- @touchmove.stop="handleTouchMove"
- @touchend.stop="handleTouchEnd"
- @touchcancel.stop="handleTouchCancel"
- @wheel.stop="handleWheel"
- >
- <ul
- ref="ulRef"
- class="image-list"
- :style="{
- width: `${imageList.length * 100}%`,
- transform: `translateX(-${
- (currentImageIndex * 100) / imageList.length
- }%)`,
- transition: '0.5s',
- }"
- >
- <li
- v-for="(item, index) in imageList"
- :key="index"
- class="image-item"
- >
- <ImageItem
- :zoom="zoom"
- :rotate="rotate"
- :src="getImageUrl(item)"
- :messageItem="item"
- :class="[isUniFrameWork ? 'image-item' : '']"
- />
- </li>
- </ul>
- </div>
- <div
- v-show="isPC"
- class="icon icon-close"
- @click="close"
- >
- <Icon
- :file="iconClose"
- width="16px"
- height="16px"
- />
- </div>
- <div
- v-if="isPC && currentImageIndex > 0"
- class="image-button image-button-left"
- @click="goPrev"
- >
- <Icon :file="iconArrowLeft" />
- </div>
- <div
- v-if="isPC && currentImageIndex < imageList.length - 1"
- class="image-button image-button-right"
- @click="goNext"
- >
- <Icon :file="iconArrowLeft" />
- </div>
- <div :class="['actions-bar', isMobile && 'actions-bar-h5']">
- <div
- v-if="isPC"
- class="icon-zoom-in"
- @click="zoomIn"
- >
- <Icon
- :file="iconZoomIn"
- width="27px"
- height="27px"
- />
- </div>
- <div
- v-if="isPC"
- class="icon-zoom-out"
- @click="zoomOut"
- >
- <Icon
- :file="iconZoomOut"
- width="27px"
- height="27px"
- />
- </div>
- <div
- v-if="isPC"
- class="icon-refresh-left"
- @click="rotateLeft"
- >
- <Icon
- :file="iconRotateLeft"
- width="27px"
- height="27px"
- />
- </div>
- <div
- v-if="isPC"
- class="icon-refresh-right"
- @click="rotateRight"
- >
- <Icon
- :file="iconRotateRight"
- width="27px"
- height="27px"
- />
- </div>
- <span class="image-counter">
- {{ currentImageIndex + 1 }} / {{ imageList.length }}
- </span>
- </div>
- <div
- class="save"
- @click.stop.prevent="save"
- >
- <Icon
- :file="iconDownload"
- width="20px"
- height="20px"
- />
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, watchEffect, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
- import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
- import { TUIGlobal, getPlatform } from '@tencentcloud/universal-api';
- import Icon from '../../common/Icon.vue';
- import iconClose from '../../../assets/icon/icon-close.svg';
- import iconArrowLeft from '../../../assets/icon/icon-arrow-left.svg';
- import iconZoomIn from '../../../assets/icon/zoom-in.svg';
- import iconZoomOut from '../../../assets/icon/zoom-out.svg';
- import iconRotateLeft from '../../../assets/icon/rotate-left.svg';
- import iconRotateRight from '../../../assets/icon/rotate-right.svg';
- import iconDownload from '../../../assets/icon/download.svg';
- import ImageItem from './image-item.vue';
- import { Toast, TOAST_TYPE } from '../../common/Toast/index';
- import { isPC, isMobile, isUniFrameWork } from '../../../utils/env';
- interface touchesPosition {
- pageX1?: number;
- pageY1?: number;
- pageX2?: number;
- pageY2?: number;
- }
- const props = withDefaults(
- defineProps<{
- imageList: IMessageModel[];
- currentImage: IMessageModel;
- }>(),
- {
- imageList: () => ([] as IMessageModel[]),
- messageItem: () => ({} as IMessageModel),
- },
- );
- const imageFormatMap = new Map([
- [1, 'jpg'],
- [2, 'gif'],
- [3, 'png'],
- [4, 'bmp'],
- ]);
- const emit = defineEmits(['close']);
- const zoom = ref(1);
- const rotate = ref(0);
- const minZoom = ref(0.1);
- const currentImageIndex = ref(0);
- const image = ref();
- const ulRef = ref();
- // touch
- let startX = 0;
- const touchStore = {} as touchesPosition;
- let moveFlag = false;
- let twoTouchesFlag = false;
- let timer: number | null = null;
- watchEffect(() => {
- currentImageIndex.value = props.imageList.findIndex((message: any) => {
- return message.ID === props?.currentImage?.ID;
- });
- });
- const isNumber = (value: any) => {
- return typeof value === 'number' && isFinite(value);
- };
- const handleTouchStart = (e: any) => {
- e.preventDefault();
- moveInit(e);
- twoTouchesInit(e);
- };
- const handleTouchMove = (e: any) => {
- e.preventDefault();
- moveFlag = true;
- if (e.touches && e.touches.length === 2) {
- twoTouchesFlag = true;
- handleTwoTouches(e);
- }
- };
- const handleTouchEnd = (e: any) => {
- e.preventDefault();
- e.stopPropagation();
- let moveEndX = 0;
- let X = 0;
- if (twoTouchesFlag) {
- if (!timer) {
- twoTouchesFlag = false;
- delete touchStore.pageX2;
- delete touchStore.pageY2;
- timer = setTimeout(() => {
- timer = null;
- }, 200);
- }
- return;
- }
- // H5 touch move to left to go to prev image
- // H5 touch move to right to go to next image
- if (timer === null) {
- switch (moveFlag) {
- // touch event
- case true:
- moveEndX = e?.changedTouches[0]?.pageX;
- X = moveEndX - startX;
- if (X > 100) {
- goPrev();
- } else if (X < -100) {
- goNext();
- }
- break;
- // click event
- case false:
- close();
- break;
- }
- timer = setTimeout(() => {
- timer = null;
- }, 200);
- }
- };
- const handleTouchCancel = () => {
- twoTouchesFlag = false;
- delete touchStore.pageX1;
- delete touchStore.pageY1;
- };
- const handleWheel = (e: any) => {
- e.preventDefault();
- if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return;
- let scale = zoom.value;
- scale += e.deltaY * (e.ctrlKey ? -0.01 : 0.002);
- scale = Math.min(Math.max(0.125, scale), 4);
- zoom.value = scale;
- };
- const moveInit = (e: any) => {
- startX = e?.changedTouches[0]?.pageX;
- moveFlag = false;
- };
- const twoTouchesInit = (e: any) => {
- const touch1 = e?.touches[0];
- const touch2 = e?.touches[1];
- touchStore.pageX1 = touch1?.pageX;
- touchStore.pageY1 = touch1?.pageY;
- if (touch2) {
- touchStore.pageX2 = touch2?.pageX;
- touchStore.pageY2 = touch2?.pageY;
- }
- };
- const handleTwoTouches = (e: any) => {
- const touch1 = e?.touches[0];
- const touch2 = e?.touches[1];
- if (touch2) {
- if (!isNumber(touchStore.pageX2)) {
- touchStore.pageX2 = touch2.pageX;
- }
- if (!isNumber(touchStore.pageY2)) {
- touchStore.pageY2 = touch2.pageY;
- }
- }
- const getDistance = (
- startX: number,
- startY: number,
- stopX: number,
- stopY: number,
- ) => {
- return Math.hypot(stopX - startX, stopY - startY);
- };
- if (
- !isNumber(touchStore.pageX1)
- || !isNumber(touchStore.pageY1)
- || !isNumber(touchStore.pageX2)
- || !isNumber(touchStore.pageY2)
- ) {
- return;
- }
- const touchZoom
- = getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY)
- / getDistance(
- touchStore.pageX1 as number,
- touchStore.pageY1 as number,
- touchStore.pageX2 as number,
- touchStore.pageY2 as number,
- );
- zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
- };
- onMounted(() => {
- // web: close on esc keydown
- document?.addEventListener
- && document?.addEventListener('keydown', handleEsc);
- });
- const handleEsc = (e: any) => {
- e.preventDefault();
- if (e?.keyCode === 27) {
- close();
- }
- };
- const zoomIn = () => {
- zoom.value += 0.1;
- };
- const zoomOut = () => {
- zoom.value
- = zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
- };
- const close = () => {
- emit('close');
- };
- const rotateLeft = () => {
- rotate.value -= 90;
- };
- const rotateRight = () => {
- rotate.value += 90;
- };
- const goNext = () => {
- currentImageIndex.value < props.imageList.length - 1
- && currentImageIndex.value++;
- initStyle();
- };
- const goPrev = () => {
- currentImageIndex.value > 0 && currentImageIndex.value--;
- initStyle();
- };
- const initStyle = () => {
- zoom.value = 1;
- rotate.value = 0;
- };
- const getImageUrl = (message: IMessageModel) => {
- if (isPC) {
- return message?.payload?.imageInfoArray[0]?.url;
- } else {
- return message?.payload?.imageInfoArray[2]?.url;
- }
- };
- const save = () => {
- const imageMessage = props.imageList[
- currentImageIndex.value
- ] as IMessageModel;
- const imageSrc = imageMessage?.payload?.imageInfoArray[0]?.url;
- if (!imageSrc) {
- Toast({
- message: TUITranslateService.t('component.图片 url 不存在'),
- type: TOAST_TYPE.ERROR,
- });
- return;
- }
- switch (getPlatform()) {
- case 'wechat':
- // Get the user's current settings and get the album permissions
- TUIGlobal.getSetting({
- success: (res: any) => {
- if (!res?.authSetting['scope.writePhotosAlbum']) {
- TUIGlobal.authorize({
- scope: 'scope.writePhotosAlbum',
- success() {
- downloadImgInUni(imageSrc);
- },
- fail() {
- TUIGlobal.showModal({
- title: '您已拒绝获取相册权限',
- content: '是否进入权限管理,调整授权?',
- success: (res: any) => {
- if (res.confirm) {
- // Call up the client applet settings interface and return the operation results set by the user.
- // Ask the user to authorize again.
- TUIGlobal.openSetting({
- success: (res: any) => {
- console.log(res.authSetting);
- },
- });
- } else if (res.cancel) {
- return Toast({
- message: TUITranslateService.t('component.已取消'),
- type: TOAST_TYPE.ERROR,
- });
- }
- },
- });
- },
- });
- } else {
- // If you already have album permission, save directly to the album
- downloadImgInUni(imageSrc);
- }
- },
- fail: () => {
- Toast({
- message: TUITranslateService.t('component.获取权限失败'),
- type: TOAST_TYPE.ERROR,
- });
- },
- });
- break;
- case 'app':
- downloadImgInUni(imageSrc);
- break;
- default:
- downloadImgInWeb(imageSrc);
- break;
- }
- };
- const downloadImgInUni = (src: string) => {
- TUIGlobal.showLoading({
- title: '大图提取中',
- });
- TUIGlobal.downloadFile({
- url: src,
- success: function (res: any) {
- TUIGlobal.hideLoading();
- TUIGlobal.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success: () => {
- Toast({
- message: TUITranslateService.t('component.已保存至相册'),
- type: TOAST_TYPE.SUCCESS,
- });
- },
- });
- },
- fail: function () {
- TUIGlobal.hideLoading();
- Toast({
- message: TUITranslateService.t('component.图片下载失败'),
- type: TOAST_TYPE.ERROR,
- });
- },
- });
- };
- const downloadImgInWeb = (src: string) => {
- const option: any = {
- mode: 'cors',
- headers: new Headers({
- 'Content-Type': 'application/x-www-form-urlencoded',
- }),
- };
- const imageMessage = props.imageList[
- currentImageIndex.value
- ] as IMessageModel;
- const imageFormat: number = imageMessage?.payload?.imageFormat;
- if (!imageFormatMap.has(imageFormat)) {
- Toast({
- message: TUITranslateService.t('component.暂不支持下载此类型图片'),
- type: TOAST_TYPE.ERROR,
- });
- return;
- }
- // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
- if ((window as any).fetch) {
- fetch(src, option)
- .then(res => res.blob())
- .then((blob) => {
- const a = document.createElement('a');
- const url = window.URL.createObjectURL(blob);
- a.href = url;
- a.download = url + '.' + imageFormatMap.get(imageFormat);
- a.click();
- });
- } else {
- const a = document.createElement('a');
- a.href = src;
- a.target = '_blank';
- a.download = src + '.' + imageFormatMap.get(imageFormat);
- a.click();
- }
- };
- onUnmounted(() => {
- document?.removeEventListener
- && document?.removeEventListener('keydown', handleEsc);
- });
- </script>
- <style lang="scss" scoped>
- @import "../../../assets/styles/common";
- .actions-bar {
- display: flex;
- justify-content: space-around;
- align-items: center;
- position: absolute;
- bottom: 5%;
- padding: 12px;
- border-radius: 6px;
- background: rgba(255, 255, 255, 0.8);
- &-h5 {
- padding: 6px;
- }
- .icon {
- position: static;
- font-size: 24px;
- cursor: pointer;
- width: 27px;
- height: 27px;
- margin: 5px;
- }
- .icon-zoom-in,
- .icon-zoom-out,
- .icon-refresh-left,
- .icon-refresh-right {
- cursor: pointer;
- user-select: none;
- padding: 5px;
- }
- }
- .image-previewer {
- position: fixed;
- z-index: 101;
- width: 100vw;
- height: 100vh;
- background: rgba(#000, 0.3);
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- user-select: none;
- .image-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- }
- .image-list {
- position: absolute;
- height: 100%;
- left: 0;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: row;
- place-content: center center;
- .image-item {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- }
- }
- .image-preview {
- max-width: 100%;
- max-height: 100%;
- transition: transform 0.1s ease 0s;
- pointer-events: auto;
- }
- .image-button {
- display: flex;
- flex-direction: column;
- min-width: auto;
- justify-content: center;
- align-items: center;
- position: absolute;
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- top: calc(50% - 20px);
- background: rgba(255, 255, 255, 0.8);
- &-left {
- left: 10px;
- }
- &-right {
- right: 10px;
- transform: rotate(180deg);
- }
- .icon {
- position: absolute;
- bottom: 0;
- top: 0;
- left: 0;
- right: 0;
- margin: auto;
- line-height: 40px;
- display: flex;
- flex-direction: column;
- min-width: auto;
- justify-content: center;
- align-items: center;
- }
- }
- .icon-close {
- position: absolute;
- cursor: pointer;
- border-radius: 50%;
- top: 3%;
- right: 3%;
- padding: 10px;
- background: rgba(255, 255, 255, 0.8);
- display: flex;
- &::before,
- &::after {
- background-color: #444;
- }
- }
- }
- .image-previewer-h5 {
- width: 100%;
- height: 100%;
- background: #000;
- display: flex;
- flex-direction: column;
- }
- .save {
- cursor: pointer;
- display: flex;
- justify-content: space-around;
- align-items: center;
- position: absolute;
- bottom: 5%;
- right: 5%;
- padding: 12px;
- border-radius: 6px;
- background: rgba(255, 255, 255, 0.8);
- }
- .image-counter {
- background: rgba(20, 18, 20, 0.53);
- padding: 3px 5px;
- margin: 5px;
- border-radius: 3px;
- color: #fff;
- }
- </style>
|