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

方法一

1、安装插件 wxml2canvas

复制代码
npm install --save 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>

方法二

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

相关推荐
2501_915921435 分钟前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
知识分享小能手23 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
一匹电信狗1 小时前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
2501_916008892 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张4 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_916008894 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_915918414 小时前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
说私域8 小时前
开源AI大模型AI智能名片S2B2C商城小程序在护肤品文案痛点表达中的应用与效果研究
人工智能·小程序
weixin_177297220698 小时前
盲盒一番赏小程序系统开发:重构潮玩消费的沉浸式革命
小程序·重构·盲盒
weixin_177297220698 小时前
短剧小程序系统开发:开启影视娱乐新纪元
小程序·短剧