1***@qq.com
1***@qq.com
  • 发布:2020-06-09 16:38
  • 更新:2020-10-17 11:07
  • 阅读:4208

uni-app H5端 uni.canvasToTempFilePath 得到的临时路径 显示不全

分类:uni-app

真的搞不懂了,真真的官方文档获取就是不行到底想咋样?有大佬吗!!!救救孩子吧,头发要没了

2020-06-09 16:38 负责人:无 分享
已邀请:

最佳回复

取舍

取舍 - 我们都如流星短暂 但谁能像它闪耀

首先 你没有指定canvas的宽高,其次你没有将图片的宽对应canvas的宽, 你绘制了图片的实际宽高, 事实上你绘制的已经超出了canvas的范围, 所以最终生成图片 只有canvas内的那一块

  • 1***@qq.com (作者)

    谢谢,我之前尝试给canvas一个宽高,图片画出来也画全了。我想问一下,为啥不能通过uni.getSystemInfoSync()的方法来实现动态给canvas赋值动态宽高?


    2020-06-10 11:17

DCloud_UNI_GSQ

DCloud_UNI_GSQ

其他端是否正常?
另外你贴一个图,不如上传一个示例

  • 1***@qq.com (作者)

    大佬我把代码部分上传了,你帮我瞅瞅吧。目前问题有:1、canvas的默认宽高无法动态改变;2、临时路径由于图片过大没有全部转为base64字符串


    2020-06-10 09:55

1***@qq.com

1***@qq.com (作者)

<template>  
	<view>  
		<!-- <canvas canvas-id="poster_share"></canvas> :style="{'width':bgImgW,'height':bgImgH}"-->  
		<!-- v-if="!posterURL" -->   
		<view  id="poster_Bg" class="poster_Bg">  
			<image class="back_image" :show-menu-by-longpress="longPress" :src="posterURL" mode="aspectFill" alt="邀请海报"></image>  
			<view style='width:0px;height:0px;overflow:hidden;'>  
				<image id="poster" class="poster"  
					:class="[type === '0'? 'code_image1':'',type === '1'? 'code_image2':'',type === '2'? 'code_image3':'']"  
					:show-menu-by-longpress="longPress"   
					:src="code"  
					style="visibility:hidden;">  
				</image>  
				<canvas canvas-id="poster_share" ></canvas>  
			</view>  
		</view>  
		<view v-if="!posterURL" id="poster_Bg" class="poster_Bg">  
			<view v-if="type === '0'" class="wrapper">  
				<image class="back_image bg_fitst" :src="image1"></image>  
				<image id="poster" class="poster code_image1" :show-menu-by-longpress="longPress" :src="code"></image>  
			</view>  
			<view v-if="type === '1'" class="wrapper">  
				<image class="back_image bg_second" :src="image2"></image>  
				<image id="poster" class="poster code_image2" :show-menu-by-longpress="longPress" :src="code"></image>  
			</view>  
			<view v-if="type === '2'" class="wrapper">  
				<image class="back_image bg_third" :src="image3"></image>  
				<image id="poster" class="poster code_image3" :show-menu-by-longpress="longPress" :src="code"></image>  
			</view>  
		</view>  
		<loading ref="loading" :custom="false" :shadeClick="true" :type="1"></loading>  
	</view>  
</template>  
<script>  
import loading from '@/components/xuan-loading/xuan-loading.vue';  
import storageService from '@/providers/essential/storageService.js';  
import Util from '@/common/util.js';  
export default {  
	components: {  
		loading  
	},  
	data() {  
		return {  
			longPress: true,  
			work_no: '',  
			name: '',  
			channel: '',  
			type: '',  
			code: '',  
			image: '',  
			twoButton: false,  
			image1:'',  
			image2: '',  
			image3: '',  
			bgImgW:'',  
			bgImgH:'',  
			codeImg_w:'',  
			codeImg_h:'',  
			codeImg_disX:'',  
			codeImg_disY:'',  
			posterURL:''  
		};  
	},  
	onLoad: function(option) {  
		// let app_info = storageService.getStorageSync('app_info');  
		// 小程序获取要跳转页面页面URL中携带的Params参数  
		if (option) {  
			console.log(option);  
			this.name = option.name;  
			this.work_no = option.work_no;  
			this.channel = option.channel;  
			this.type = option.type;  
			// storageService.removeStorageSync('code_info');  
		}  
	},  
	mounted: function() {  
		this.image1 = this.$API.localImgUrl + this.$API.image1  
		this.image2 = this.$API.localImgUrl + this.$API.image2  
		this.image3 = this.$API.localImgUrl + this.$API.image3  
		// this.createQrCode()  
		this.drawImage()  
	},  
	methods: {  
		createQrCode: function(){  
			let param_info = 'psechannel=' + this.channel + '&pseempid=' + this.work_no;  
			let url_data = this.$REQUEST_HREF_URL;  
			let params = {  
				encip_flag: 'N',  
				param_info: param_info,  
				url_data: url_data  
			};  
			let that = this;  
			this.$UNIHTTP.requerstHttp(this, this.$REQUEST_SERVER_URL + this.$API.gen, params, function success(res) {  
				if (res) {  
					console.log(res.qr_code);  
					that.code = 'data:image/png;base64,' + res.qr_code  
					let code_info = that.code  
					storageService.setStorageSync('code_info',code_info)  
				}  
			});  
		},  
		// uniapp可通过此方法对本地路径  很大几率真机没效果  
		urlTobase64: function(url) {  
			var toBase64Url;  
			uni.request({  
			url: url,  
			method: 'GET',  
			responseType: 'arraybuffer',  
			success: async res => {  
					let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64  
					toBase64Url = 'data:image/png;base64,' + base64; //不加上这串字符,在页面无法显示  
					// console.log(toBase64Url)  
				}  
			});  
		},  
		drawImage: function() {  
			let that= this;  
			let systemInfo = uni.getSystemInfoSync();  
			that.bgImgW = systemInfo.windowWidth;  
			that.bgImgH = systemInfo.windowHeight;  
			let ctx = uni.createCanvasContext('poster_share',that);  
			console.log(systemInfo)  
			// 获取对应的背景图片that  
			let promise1 = new Promise(function(resolve,reject){  
				console.log(that.type)  
				let bgSrc  
				if(that.type === '0' ){  
					bgSrc = that.image1;  
				} else if (that.type === '1' ){  
					bgSrc = that.image2;  
				} else if (that.type === '2' ){  
					bgSrc = that.image3;  
				}  
				console.log(bgSrc)  
				uni.getImageInfo({  
					src: bgSrc,  
					success:function(res){  
					   resolve(res);  
					},  
					fail:function(err){  
						reject(err);  
					}  
				})  
			 })  
			 //获取对应的二维码  
			 let promise2 = new Promise(function(resolve,reject){  
				 let code_info = storageService.getStorageSync('code_info')  
				 if(!code_info){  
				 	that.createQrCode()  
				 }  
				 let codeSrc = code_info;  
			    uni.getImageInfo({  
					src: codeSrc,  
					success:function(res){  
					   resolve(res);  
					},  
					fail:function(err){  
						reject(err);  
					}  
			   })  
			})  
			//成功得到图片信息后,开始绘图  
			Promise.all([promise1,promise2])                          
			.then(res=>{  
				console.log(res)  
				let bgSrc = res[0].path  
				let codeSrc = res[1].path  
				uni.downloadFile({    //网络图片需要先下载到本地  
					url:bgSrc,  
					success(res) {  
						// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容  
						if (res.statusCode === 200) {  
							console.log(res)  
							ctx.drawImage(res.tempFilePath, 0, 0, that.bgImgW, that.bgImgH);  
							uni.downloadFile({    //下载第二张网络图片  
								url:codeSrc,  
								success(res){  
									if (res.statusCode === 200) {  
										console.log(res)  
										let poster = uni.createSelectorQuery().in(that).select('#poster');  
										poster.boundingClientRect((res)=>{  
											console.log(res)  
											that.codeImg_w = res.width;  
											that.codeImg_h = res.height;  
											that.codeImg_disX = res.left;  
											that.codeImg_disY = res.bottom;  
										}).exec()  
										ctx.drawImage(res.tempFilePath,that.codeImg_disX,that.codeImg_disY,that.codeImg_w,that.scodeImg_h)  
										ctx.draw(true,setTimeout(function(){  
											uni.canvasToTempFilePath({  
												x:0,  
												y:0,  
												width:that.bgImgW,  
												height:that.bgImgH,  
												canvasId:'poster_share',  
												fileType:'jpg' ,  
												success:function(res){  
													console.log(res);   
													that.posterURL = res.tempFilePath  
													uni.hideLoading()  
													// that.saveToAlbum()  //保存到相册  
													// const savedFilePath = res.tempFilePath //相对路径  
													// const path = plus.io.convertLocalFileSystemURL(savedFilePath) //绝对路径  
													// const fileReader = new plus.io.FileReader()  
													// fileReader.readAsDataURL(path)  
													// fileReader.onloadend = (res) => { //读取文件成功完成的回调函数  
													// 	console.log(res.target.result) //输出base64内容  
													// 	that.posterURL = res.target.result; //该路径为生成海报图片的临时路径   
													// 	uni.hideLoading()  
													// 	that.saveToAlbum()  //保存到相册  
													// }  
												},  
												fail:function(res){  
													console.log(res)  
												}  
												},this)  
											},5000))  
										}  
									}  
								})  
							 }  
						}  
					})    
			}).catch(function(error) {  
				console.log(error)  
			})   
		},  
		close: function() {  
			this.$refs.loading.close();  
		},  
		open: function() {  
			this.$refs.loading.open();  
		}  
	}  
};  
</script>
MichaelGao

MichaelGao - Michael Gao

同上,是有时候不稳定。

1***@qq.com

1***@qq.com (作者)

是的,有什么好的优化说下

该问题目前已经被锁定, 无法添加新回复