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>

方法二

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】数组概述

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;C语言 &#x1f525;该篇将带你了解 一维数组&#xff0c;二维数组等相关知识。 目录&#xff1a; &#x1f4d8;前言&#xff1a;&#x1f…

Chrome谷歌浏览器修改输入框自动填充样式

Chrome谷歌浏览器修改输入框自动填充样式 背景字体 背景 input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset !important; }字体 input:-internal-autofill-selected {-webkit-text-fill-color: #000 !important; }

KaiwuDB CTO 魏可伟:回归用户本位,打造“小而全”的数据库

8月16日&#xff0c;KaiwuDB 受邀亮相第十四届中国数据库技术大会 DTCC 2023。KaiwuDB CTO 魏可伟接受大会主办方的采访&#xff0c;双方共同围绕“数据库架构演进、内核引擎设计以及不同技术路线”展开深度探讨。 以下是采访的部分实录 ↓↓↓ 40 多年前&#xff0c;企业的数…

html动态爱心代码【三】(附源码)

目录 前言 特效 内容修改 完整代码 总结 前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;表白等场景&#xff0c;可直…

OrienterNet: visual localization in 2D public maps with neural matching 论文阅读

论文信息 题目&#xff1a;OrienterNet: visual localization in 2D public maps with neural matching 作者&#xff1a;Paul-Edouard Sarlin&#xff0c; Daniel DeTone 项目地址&#xff1a;github.com/facebookresearch/OrienterNet 来源&#xff1a;CVPR 时间&#xff1a…

win10 下运行 npm run watch-poll问题

背景&#xff1a;在本地练习laravel项目&#xff0c;windows 宝塔环境&#xff08;之前装过ubuntu子系统&#xff0c;很慢&#xff0c;就放弃了。有知道的兄弟说下&#xff0c;抱拳&#xff09;。以下命令我是在本地项目中用git bash里运行的&#xff0c;最好用管理员权限打开你…

el-upload组件调用后端接口上传文件实践

要点说明&#xff1a; 使用:http-request覆盖默认的上传行为&#xff0c;可以添加除文件外的其他参数&#xff0c;注意此时仍需保留action属性&#xff0c;action可以传个空串给http-request属性绑定的函数&#xff0c;函数入参必须为param调用接口请求&#xff0c;注意 heade…

Django实现音乐网站 ⒀

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是推荐页-推荐排行榜、推荐歌手功能开发。 目录 推荐页开发 推荐排行榜 单曲表增加播放量 表模型增加播放量字段 执行表操作 模板中显示外键对应值 表模型外键设置 获取外键对应模型值 推荐排行榜视图 推…

函数式编程

函数式编程 函数式编程思想&#xff1a;对方法中的数据进行了什么操作 优点&#xff1a;代码简介、便于理解、易于并发编程 1.Lambda表达式 JDK8中的语法糖&#xff0c;可以对某些匿名内部类的写法进行简化 使用条件&#xff1a;匿名内部类是一个接口&#xff0c;并且接口只…

ERROR in static/js/xxx.js from UglifyJs

老项目用的webpack3&#xff0c;打包的时候遇到**ERROR in static/js/xxx.js from UglifyJs**这个报错&#xff0c; UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集&#xff0c;是前端开发打包的最常用工具之一&#xff0c;只支持ES5&#xff0c;不支持ES6&#x…

GraphScope,开源图数据分析引擎的领航者

文章首发地址 GraphScope是一个开源的大规模图数据分析引擎&#xff0c;由Aliyun、阿里巴巴集团和华为公司共同开发。GraphScope旨在为大规模图数据处理和分析提供高性能、高效率的解决方案。 Github地址&#xff1a; https://github.com/alibaba/GraphScope GraphScope 的重…

【电商领域】Axure在线购物商城小程序原型图,抖音商城垂直电商APP原型

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;网上商城、品牌自营商城、商城模块插件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为品牌自营网上商城…

logstash配置文件

input { kafka { topics > “xxxx” bootstrap_servers > “ip:port” auto_offset_reset > “xxxx” group_id > “xxxx” consumer_threads > 3 codec > “json” } } filter { grok { match > { “message” > ‘%{IP:client_ip} - - [%{HTTPDATE:…

ios 声网agora 音视频直播场景下的集成总结

文章目录 一、前言二、视频会议场景2.1 场景描述2.2 功能列表三、电商直播场景3.1 场景描述3.2 功能列表3.3 技术方案四、声网iOS SDK集成4.1 集成4.2 示例demo4.3 核心代码4.3.1 初始化4.3.2 加入频道4.3.3 切换身份4.4.4 连麦4.4 相关问题4.4.1 监听观众角色用户事件五、相关…

线性代数的学习和整理---番外1:EXCEL里角度,弧度,三角函数

目录 1 角的度量&#xff1a;角度和弧度 1.1 角度 angle 1.1.1 定义 1.1.2 公式 1.1.2 角度取值范围 1.2 弧长和弦长 1.3 弧度 rad 1.3.1 弧长和弧度定义的原理 1.3.2 定义 1.3.3 取值范围 1.3.4 取值范围 1.4 角度&#xff0c;弧度的换算 1.5 EXCEL里进行角度和…

STL list基本用法

目录 list的使用构造函数和赋值重载迭代器(最重要)容量相关插入删除元素操作reversesortuniqueremovesplice list的底层实际是双向链表结构 list的使用 构造函数和赋值重载 构造函数说明list()无参构造list (size_type n, const value_type& val value_type())构造的li…

安全学习DAY18_信息打点-APP资产搜集

信息打点-APP资产&静态提取&动态抓包&动态调试 文章目录 信息打点-APP资产&静态提取&动态抓包&动态调试本节知识&思维导图本节使用到的链接&工具 如何获取目标APP从名称中获取APP从URL获取APP APP搜集资产信息APP提取信息分类信息提取方式信息…

怎么管理运营私域流量?

私域流量管理是当今企业运营的重要议题&#xff0c;对于企业发展和品牌建设具有不可忽视的作用。然而&#xff0c;管理私域流量并不是一项轻松的任务&#xff0c;需要我们采取科学有效的措施&#xff0c;才能取得良好的效果。 首先&#xff0c;私域流量管理需要建立清晰的目标。…

Linux系统安全——NAT(SNAT、DNAT)

目录 NAT SNAT SNAT实际操作 DNAT DNAT实际操作 NAT NAT: network address translation&#xff0c;支持PREROUTING&#xff0c;INPUT&#xff0c;OUTPUT&#xff0c;POSTROUTING四个链 请求报文&#xff1a;修改源/目标IP&#xff0c; 响应报文&#xff1a;修改源/目标…

HTTP 握手过程

HTTP 握手过程 TCP 建立连接 3 次握手 客户端请求连接服务器服务器响应成功客户端回应服务器准备开始连接 TCP 结束连接 4 次挥手 客户端向服务器发送&#xff0c;断开请求服务器向客户端发送&#xff0c;还有数据没有传输完毕&#xff0c;请稍等服务器向客户端发送&#x…