uni-app APP、html引入html2canvas截图以及截长图

news/2024/10/30 13:31:31/

下载安装html2canvas

方式一,https://www.bootcdn.cn/ CDN网站下载html2canvas插件

在这里插入图片描述
在这里插入图片描述
这里下载后放在测项目目录common下面
在这里插入图片描述
页面中引入
在这里插入图片描述

方式二、npm方式安装html2canvas

1、npm方式下载

npm i html2canvas

2、引入html2canvas

import html2canvas from 'html2canvas'

2,uni-app框架引入html2canvas插件资源

renderjs基础知识

renderjs是一个运行在视图层的js,它只支持app-vue和h5, 主要服务于APP
renderjs官网
对于UNI APP端的开发而言,由于上并没有document,不能进行相关的DOM操作,同时有关DOM渲染的第三方库(echart、openlayer、canvas等)也无法有效的使用,因此官方推出了renderjs方案,来解决上述问题。
一、renderjs作用:
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力,减少通讯损耗提升性能
在视图层操作dom,运行for web的js库(可以操作dom,意味着拥有window、document等这些全局变量,在app-vue的service层没有这些)
二、renderjs和service层的通信
具体分为三部分:
1.在template中通过用户手动操作触发事件
2.在service层中调用方法
3.在renderjs中调用方法
从renderjs到service层:通过this.$ownerInstance.callMethod()方法可以调用service中的方法,第一个参数是方法名,第二个参数是传过去的参数
三、renderjs的使用
概述:
原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)
直接调用renderjs层方法传出的数据

设置 script 节点的 lang 为 renderjs

script的module的名称可以随便取,module=(值任意,相当于命名空间,之后会根据这个名字调用其中的方法),但是change:参数名称必须和module保持一致,虽然不会阻断renderjs的运行,但是会报错,也会导致无法捕获数据的变化

注意事项:

目前仅支持内联使用

不要直接引入大型类库,推荐通过创建script方法引入

可以使用vue组件的生命周期不可以使用App Page的生命周期

视图层和逻辑层通讯方式与WXS一致,另外可以通过this.$ownerInstance获取当前组件的ComponentDescriptor实例

观测更新的数据在视图层可以直接访问到

APP端视图层的页面引用资源的路径相对于根目录,例如:./static/test.js

APP端可以使用dom bom API ,不可直接访问逻辑层数据,renderjs不可使用uni或其他框架的API(如:uni.request),需在原生层调用后触发监听将数据传入

H5端逻辑基层和视图层实际运行在同一个环境下,相当于使用mixin,可以直接访问逻辑层数据

在app端renderjs层的data与原生层的data互不相干

this.$ownerInstance.callMethod方法必须通过点击事件执行

地图方法都要写在renderjs层,不能使用子组件

renderjs怎样使用?

1.原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)

 <template><view><u-button @click="renderScrpt.emitData" size="mini">按钮</u-button><!-- renderScrpt为renderjs中的组件名字 --><view id="myMap" :info="info" :change:info="renderScrpt.receiveInfo"></view></view>
</template><script>
export default {data() {return {// 用于桥接的数据info: '一开始的消息',};},mounted() {setTimeout(() => {this.info = '变化的消息';}, 1000);},methods: {// renderjs发送过来的数据receiveRenderData(val) {console.log('renderjs返回的值-->', val);},},
};
</script>
<style lang="scss">
#myMap {width: 100%;height: 100vh;
}
</style>
<!-- 声明module属性,view中需要通过module声明的调用里面的方法  -->
<script module="renderScrpt" lang="renderjs">
export default {data() {return {map: null,linePath: [],}},mounted() {},methods: {// 发送数据到逻辑层emitData(e, ownerVm) {console.log(e);ownerVm.callMethod('receiveRenderData', this.linePath)},// 接收逻辑层发送的数据receiveInfo(newValue){console.log(newValue);},
}
</script>

2.视图中直接调用renderjs层方法传出数据

<view style="padding: 8rpx;">
<button style="background-color: #20B2AA;" text="保存此次查询" @click="renderScrpt.receiveInfo(data)"></button>
</view>

遇到的错误

1、canvas图片绘制跨域问题解决方案Tainted canvases may not be exported

原因就在于使用了跨域的图片或者有两张不同来源的图片比如一张本地一张服务器,所以说是被污染的画布。
解决方案如下
1、为image请求添加跨域

var image = new Image()
image.setAttribute("crossOrigin",'Anonymous')
image.src = src

但也许有可能服务器不让你跨域请求图片(也不知道为啥),那么用到方案2
2、通过把请求的图片转化成base64再进行使用
代码如下

function getURLBase64(url) {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest()xhr.open('get', url, true)xhr.responseType = 'blob'xhr.onload = function() {if (this.status === 200) {var blob = this.responsevar fileReader = new FileReader()fileReader.onloadend = function(e) {var result = e.target.resultresolve(result)}fileReader.readAsDataURL(blob)}}xhr.onerror = function() {reject()}xhr.send()})
}

http://www.ppmy.cn/news/307910.html

相关文章

黑白打印机M268 dw安装教程

黑白打印机M268 dw安装教程

ShineDisk M667固态修复记录 慧荣SM2258XT开卡量产工具

电脑突然开机异常&#xff0c;不识别固态硬盘&#xff08;系统盘&#xff09;&#xff0c;换回机械硬盘重装系统后&#xff0c;通过硬盘盒测试&#xff0c;依然无法识别&#xff0c;断定坏了。盘已过保&#xff0c;咨询ShineDisk官网&#xff0c;让返厂维修&#xff0c;维修费用…

[云生活]智能DIY的基础准备:3D打印机

1. 需求和作用 我们在DIY的时候&#xff0c;如果只是图一时功能的实现&#xff0c;任由我们开发的东西的身体裸露在视线了&#xff0c;慢慢&#xff0c;我们的热情就可能会丧失或者简单。在3D打印机发明或平民化之前&#xff0c;我们更多的是用木工技术、雕刻技术、布艺等方法&…

《工业设计史》 第三章:18世纪的设计与商业

背景&#xff1a;工业革命的真正发端是一个富足中的社会对于更多、更好商品的渴求&#xff0c;而原有的劳动组织形式和生产技术又无法满足这种渴求。 新的工业方法正是在消费工业中产生的 设计与商业的关系&#xff1a; 引子&#xff1a;随着机械化和劳动分工的出现&#xff0…

kstools工具是什么牌子_文物修复工具分享|打磨步骤中砂纸的选择

相比大家都看过很多修复类的书籍和教材&#xff0c;但是文物修复中最重要的一步是打磨&#xff0c;但是用什么砂纸目前还没有文章去做详细介绍&#xff0c;今天我就来把砂纸给大家详细的说清楚。 常见的博物馆修复是这样的 第1、本文不是展览性修复方向的&#xff0c;这次的砂纸…

Springboot整合Mail进行邮箱验证码注册

目录 一、导入依赖二、application.yml配置三、EmailService代码解读四、VerificationCodeUtils随机验证码代码解读五、controller层代码解读六、整体代码 一、导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-b…

如何区分自己mac电脑的CUP型号

2020年11月11日后&#xff0c;苹果发布的新版Mac电脑采用了M1芯片&#xff0c;此芯片为ARM平台&#xff0c;造成原先英特尔(Intel)CPU下的一些软件可能在M1芯片上无法运行&#xff01;如何下载适合自己cup型号的软件呢&#xff1f;首先小编来教你区分分自己mac电脑的CUP型号。 …

苹果计算机cpu 型号怎么看,苹果电脑型号怎么看_mac电脑怎么看型号-win7之家

当我们要在电脑中查看保修保障范围、创建个人库存或者完成其他操作的时候&#xff0c;或者要查自己电脑是否跟最新的操作系统或其他软件硬件兼容&#xff0c;都会需要知道电脑的型号或者序列号&#xff0c;但是有很多苹果电脑用户并不知道型号要怎么看&#xff0c;针对这个问题…