VX小程序实现区域转图片预览

禾小毅

已于 2023-08-23 13:40:34 修改

阅读量709

点赞数

分类专栏： VX小程序文章标签：小程序

于 2023-08-22 17:22:52 首次发布

本文链接：https://blog.csdn.net/weixin_50450473/article/details/132431828

版权

VX小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

图例

方法一

1、安装插件 wxml2canvas

npm install --save wxml2canvas

git地址参照：https://github.com/wg-front/wxml2canvas

2、类型

// 小程序页面
let data={
	list:[{
		type:'wxml',
		class:'.test_center .draw_canvas',
		limit:'.test_center',
		x:0,
		y:0
	}]
}

3、数据结构


let testData=[
		{
			PageIndex:1,
			ImageUrl:"https://minio.23544.com:9010/mk-sys-test/origin-paper/432531489095806/2023-06-26-15-42-38/9d43c15bb1834cacb0a8900b5e45dfb2/1.jpg",
			Height:1680.0,
			Width:1200.0,
			Questions:[
				{"QuestionNum":"1-2","X":140.00000450195313,"Y":515.989620895996,"Width":149.77778,"Height":54.77778,"score":1.00,"totalScore":2.00},
				{"QuestionNum":"1111","X":113.10765335144043,"Y":756.3195006567382,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
				{"QuestionNum":"2222","X":100.0000025946045,"Y":822.2222792822265,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
				{"QuestionNum":"12","X":95.9895980078125,"Y":1260.989620895996,"Width":1022.77778,"Height":305.77778,"score":1.00,"totalScore":14.00},
			]
		},
		{
			PageIndex:1,
			ImageUrl:"https://minio.23544.com:9010/mk-sys-test/origin-paper/432531489095806/2023-06-26-15-42-38/9d43c15bb1834cacb0a8900b5e45dfb2/1.jpg",
			Height:1680.0,
			Width:1200.0,
			Questions:[
				{"QuestionNum":"1-2","X":140.00000450195313,"Y":515.989620895996,"Width":149.77778,"Height":54.77778,"score":1.00,"totalScore":2.00},
				{"QuestionNum":"1111","X":113.10765335144043,"Y":756.3195006567382,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
				{"QuestionNum":"2222","X":100.0000025946045,"Y":822.2222792822265,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
				{"QuestionNum":"12","X":95.9895980078125,"Y":1260.989620895996,"Width":1022.77778,"Height":305.77778,"score":1.00,"totalScore":14.00},
			]
		}
	]

4、页面引用

<template>
    <canvas canvas-id="canvas1" class="test_center"></canvas>
</template>

<script setup>
import Wxml2Canvas from 'wxml2canvas';
const onclicks=()=> {
	person.drawImage = new Wxml2Canvas({
		width: 340,
		height: 210,
		element: 'canvas1',
		background: '#f0f0f0',
		finish(url) {
			console.log(7777,url)
			uni.previewImage({
				// 需要预览的图片链接列表
				urls: [url],
				// 为当前显示图片的链接/索引值
				current: url,
				// 图片指示器样式	
				indicator:'default',
				// 是否可循环预览
				loop:false
			});
		},
		error (res) {
		}
	});
	let data = {
		list: [
			{
			   type: 'image',
			   x: 0,
			   y: 0,
			   url: person.itemExam.ImageUrl,
			   style: {
				   width: person.itemExam.Width*person.scaleWidth,
				   height: person.itemExam.Height*person.scaleWidth,
				   border: '0 solid #aaaaaa',
				   boxShadow: '10 20 20 rgba(0, 0, 0, 0.4)'
			   }
		    }
		]
	}
	person.itemExam.Questions.forEach((quest,itIndex)=>{
		data.list.push({
			type: 'text',
			text: quest.score,
			x: quest.X*person.scaleWidth,
			y: quest.Y*person.scaleWidth,
			style: {
				textAlign: 'right',
				width: quest.Width*person.scaleWidth-40,
				height: quest.Height*person.scaleWidth-40,
				fontSize: 16,
				color: 'red',
				border: '0px solid red',
				padding: '6px 40px 0 0'
			}
		})
		data.list.push({
			type: 'text',
			text: '  /'+quest.totalScore,
			x: quest.X*person.scaleWidth,
			y: quest.Y*person.scaleWidth,
			style: {
				textAlign: 'right',
				width: quest.Width*person.scaleWidth-6,
				height: quest.Height*person.scaleWidth-6,
				fontSize: 16,
				color: 'blue',
				border: '1px solid red',
				padding: '6px 6px 0 0'
			}
		})
	})
	
	person.drawImage.draw(data);
}
</script>

方法二

1、使用canvas画图组件

有坑：uni.getImageInfo 方法转出的地址是http 不是https，而 uni.previewImage 识别 https的，否则图片会出不来

<template>
<canvas v-if="person.isShowExam" @click="saveFile" class="test_center" canvas-id="postCanvars" :width="person.itemExam.Width*person.scaleWidth" :height="person.itemExam.Height*person.scaleWidth"></canvas>
<view v-else @click="saveFile" class="test_center" :style="{width:person.itemExam.Width*person.scaleWidth+'px;',height:person.itemExam.Height*person.scaleWidth+'px;'}">
	<image class="draw_canvas" data-type="image" :src="person.itemExam.ImageUrl" mode=""></image>
	<view class="test_center_page draw_canvas">
		<view class="page_item flex draw_canvas" v-for="(quest,quIndex) in person.itemExam.Questions" :key="quIndex"
		:style="{ 
		top:quest.Y*person.scaleWidth +'px;',
		left:quest.X*person.scaleWidth+'px;',
		width:quest.Width*person.scaleWidth+'px;',
		height:quest.Height*person.scaleWidth+'px;'}">
		   <view class="text_flex flex draw_canvas">
			   <text class="color_red draw_canvas">{{quest.score}}</text>/
			   <text class="color_blue draw_canvas">{{quest.totalScore}}</text>
		   </view>
		</view>
	</view>
</view>

</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
const person=reactive({
	itemExam:{
		PageIndex:1,
		ImageUrl:"https://minio.23544.com:9010/mk-sys-test/origin-paper/432531489095806/2023-06-26-15-42-38/9d43c15bb1834cacb0a8900b5e45dfb2/1.jpg",
		Height:1680.0,
		Width:1200.0,
		Questions:[
			{"QuestionNum":"1-2","X":140.00000450195313,"Y":515.989620895996,"Width":149.77778,"Height":54.77778,"score":1.00,"totalScore":2.00},
			{"QuestionNum":"1111","X":113.10765335144043,"Y":756.3195006567382,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
			{"QuestionNum":"2222","X":100.0000025946045,"Y":822.2222792822265,"Width":799.77778,"Height":199.77778,"score":0.0,"totalScore":0.0},
			{"QuestionNum":"12","X":95.9895980078125,"Y":1260.989620895996,"Width":1022.77778,"Height":305.77778,"score":1.00,"totalScore":14.00},
		]
	},
	scaleWidth:0,
	scaleHeight:0,
	sharePoster:'',
	isShowExam:false
})

onLoad(()=>{
	// 获取屏幕宽
	uni.getSystemInfo({
		success:(res)=> {
			person.scaleWidth = res.windowWidth/person.itemExam.Width
			person.scaleHeight = res.windowHeight/person.itemExam.Height
		}
	})
}) 
// 保存照片
const saveFile=()=>{
	person.isShowExam=true
	uni.getImageInfo({
		src: person.itemExam.ImageUrl,
		success(res) {
			let context = uni.createCanvasContext('postCanvars')
			
			// 绘制图片
			context.drawImage(res.path, 0, 0, person.itemExam.Width*person.scaleWidth, person.itemExam.Height*person.scaleWidth)
			context.stroke()
			
			person.itemExam.Questions.forEach((quest,itIndex)=>{
				// 绘制矩形
				context.setStrokeStyle('red')
				context.rect(quest.X*person.scaleWidth, quest.Y*person.scaleWidth, quest.Width*person.scaleWidth, quest.Height*person.scaleWidth)
				context.textAlign ='right'
				context.stroke()
				// 红色文字
				context.setFontSize(16)
				context.setFillStyle('red')
				context.fillText(quest.score+'', quest.X*person.scaleWidth+24, quest.Y*person.scaleWidth+20)
				context.textAlign ='right'
				// 分割斜线
				context.setFillStyle('#000')
				context.fillText('/', quest.X*person.scaleWidth+32, quest.Y*person.scaleWidth+20)
				// 蓝色文字
				context.setFillStyle('blue')
				context.fillText(quest.totalScore, quest.X*person.scaleWidth+50, quest.Y*person.scaleWidth+20)
				context.textAlign='right'
				context.stroke()
			
				return context
			})
			
			// 生成照片保存
			context.draw(true, () => {
				uni.canvasToTempFilePath({
					canvasId: 'postCanvars',
					success: (res) => {
						uni.previewImage({
							// 需要预览的图片链接列表
							urls: [res.tempFilePath],
							// 为当前显示图片的链接/索引值
							current: res.tempFilePath,
							// 图片指示器样式	
							indicator:'default',
							// 是否可循环预览
							loop:false
						});
					},
					fail: (res) => {
						uni.showToast({
							title:'生成照片失败'
						})
					} 
				})
			})
		}
	})
}

</script>

<style lang="scss" scoped>
.test_center{
	width: 99%;
	height: calc(100vh - 310rpx);
	position: relative;
	overflow: hidden;
	image{
		width: 100%;
		height: 100%;
	}
	.page_item{
		position: absolute;
		border: 2rpx solid red;
		.text_flex{
			position: absolute;
			right: 20rpx;
			top: 0;
			text{
				font-size: 36rpx;
				font-weight: 600;
			}
		}
	}
}
.color_red{
	color: #FF2929;
}
.color_blue{
	color: #6B86FF;
}
</style>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~