我的名片下载调整

2025-04-03 11:21:13 +08:00
parent fde5830450
commit 07e477972e
6 changed files with 251 additions and 69 deletions
@@ -13,7 +13,7 @@
 						<view class="ftitle">{{userinfo.position}}</view>
 					</view>
 				    <view>
-						<image :src="userinfo.avatar" mode=""></image>
+						<image :src="imageSrc" mode="" crossOrigin="anonymous" ></image>
 					</view>
 				</view>
 				<view class="conts">
@@ -38,7 +38,7 @@
 					</view>
 				</view>
 				<view class="code">
-					<image :src="userinfo.socialize_pic_url" mode=""></image>
+					<image :src="imageSrcewm" mode="" crossOrigin="anonymous" ></image>
 					<view>{{userinfo.socialize}}</view>
 				</view>
 			    <!-- <view class="code" :class=" activeImg === share_one ? 'code_one' : activeImg === share_two ? 'code_two' : activeImg === share_three ? 'code_three' : 'code_one'">
@@ -50,6 +50,10 @@
 		<view class="foot">
 			<button class="btn"  @click="goDown">{{$t('download')}}</button>
 		</view>	
+		<!-- 手机端预览容器 -->
+		<view v-if="showPreview" class="preview-mask" @click="showPreview = false">
+		  <image :src="previewUrl" mode="aspectFit"></image>
+		</view>
 	</view>
 </template>

@@ -59,7 +63,11 @@
 	export default {
 		data() {
 			return {
-				userinfo:{}
+				userinfo:{},
+				showPreview: false,
+				previewUrl: '',
+				imageSrc:'',
+				imageSrcewm:'',
 			}
 		},
 		onLoad() {
@@ -76,64 +84,55 @@
 					method:'get',
 				}).then(res => {
 					that.userinfo = res.data.data;
+					that.downloadImageToLocal(res.data.data.avatar_url,'imageSrc')
+					that.downloadImageToLocal(res.data.data.socialize_pic_url,'imageSrcewm')
 				})
 			},
-			saveImgFile(baseImg){
-				const bitmap = new plus.nativeObj.Bitmap('test')
-				bitmap.loadBase64Data(
-				    baseImg,
-				    function () {
-				        const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
-				        bitmap.save(
-				            url,
-				            {
-				                overwrite: true // 是否覆盖
-				            },
-				            i => {
-				                plus.gallery.save(
-				                    i.target,
-				                    function () {
-										uni.showToast({
-											title: '图片保存至相册成功',
-											icon: 'none'
-										});
-				                        bitmap.clear()
-				                    },
-				                    function (e) {
-										uni.showToast({
-											title: '图片保存至相册失败',
-											icon: 'none'
-										});
-				                        // console.log('图片保存至相册失败:' + JSON.stringify(e))
-				                        bitmap.clear()
-				                    }
-				                )
-				            },
-				            e => {
-								uni.showToast({
-									title: '图片保存失败1',
-									icon: 'none'
-								});
-				                bitmap.clear()
-				            }
-				        )
-				    },
-				    e => {
-				        uni.showToast({
-				        	title: '图片保存失败2',
-				        	icon: 'none'
-				        });
-				        bitmap.clear()
-				    }
-				)
+			async downloadImageToLocal(imageUrl,item) {
+			  try {
+			    // 1. 下载图片到临时路径
+			    const { tempFilePath } = await new Promise((resolve, reject) => {
+			      uni.downloadFile({
+			        url: imageUrl,
+			        success: resolve,
+			        fail: reject,
+			      });
+			    });
+			
+			    // 2. 返回临时路径（可直接用于 <image> 显示）
+			    console.log('下载成功，临时路径:', tempFilePath);
+				if(item =='imageSrc'){
+					this.imageSrc = tempFilePath; 
+				}else{
+					this.imageSrcewm = tempFilePath; 
+				}
+			
+			  } catch (err) {
+			    console.error('下载失败:', err);
+			    throw new Error('图片下载失败');
+			  }
 			},
-			downloadImage(url, filename) {
-				// 创建一个隐藏的 <a> 标签
-				const link = document.createElement('a');
-				link.href = url;
-				link.download = filename;
-				// 触发点击事件
-				link.click();
+			downloadImage(url, canvas) {
+				const filename1 = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
+				if (uni.getSystemInfoSync().platform === 'h5') {
+				   // 创建一个隐藏的 <a> 标签
+				   const link = document.createElement('a');
+				   link.href = url;
+				   link.download = filename1;
+				   // 触发点击事件
+				   link.click();
+				}else {
+					canvas.toBlob((blob) => {
+						const blobUrl = URL.createObjectURL(blob);
+						const link = document.createElement('a');
+						link.href = blobUrl;
+						link.download = filename1;
+						document.body.appendChild(link);
+						link.click();
+						document.body.removeChild(link);
+						URL.revokeObjectURL(blobUrl); // 释放内存
+					}, 'image/png');
+				}
 			},
 			goDown(){
 				const element = document.getElementById('poster');
@@ -142,15 +141,19 @@
 				    backgroundColor: '#f5f5f5', //海报的背景颜色
 				    useCORS: true ,// 允许跨域
 					allowTaint: true, // 允许污染画布
+					scale: 2,       // 提高清晰度
+					logging: false  // 关闭日志（可选）
 				}).then(canvas => {
 				    // canvas 其实就是我们所讲的res 的意思 返回报文的意思
 				    let baseImg = canvas.toDataURL('image/png')
 					uni.showModal ({
-						title: '下载名片',
-						content: '确定下载当前名片图吗？',
+						title: this.$t('downmp'),
+						content: this.$t('downmpmsg'),
+						cancelText: this.$t('cancel'),
+						confirmText: this.$t('confirm'),
 						success: function (res) {
 							if (res.confirm) {
-								that.downloadImage(baseImg, 'screenshot.png');
+								that.downloadImage(baseImg,canvas);
 							} else if (res.cancel) {
 								console.log('用户点击取消');
 							}
@@ -4,7 +4,7 @@
 		<view class="content">
 			<view class="topimg">
 				<uni-file-picker fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="select" @delete="delfn('picture')">
-					<image class="user" :src="userinfo.avatar"mode=""></image>
+					<image class="user" :src="userinfo.avatar_url"mode=""></image>
 					<!-- <image class="xj" src="/static/image/mine/xiangji.png" mode=""></image> -->
 				</uni-file-picker>
 				<view>{{$t('mine.changeavatar')}}</view>