甘肃龙网

  1. 首页 > 生活 > >

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

生活百科调用

下载安装 方式一，CDN网站下载插件
这里下载后放在测项目目录下面
页面中引入
方式二、npm方式安装
1、npm方式下载
npm i html2canvas
2、引入
import html2canvas from 'html2canvas'
2，uni-app框架引入插件资源
基础知识
是一个运行在视图层的js,它只支持app-vue和h5, 主要服务于APP
官网
对于UNI APP端的开发而言，由于上并没有，不能进行相关的DOM操作，同时有关DOM渲染的第三方库(、、等)也无法有效的使用，因此官方推出了方案，来解决上述问题 。
一、作用：
大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，减少通讯损耗提升性能
在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有、等这些全局变量，在app-vue的层没有这些）
二、和层的通信
具体分为三部分：
1.在中通过用户手动操作触发事件
2.在层中调用方法
3.在中调用方法
从到层：通过this.$.()方法可以调用中的方法，第一个参数是方法名，第二个参数是传过去的参数
三、的使用
概述：
原生层数据通过监听传入层（可以通过调用原生层的方法触发）
直接调用层方法传出的数据
设置节点的 lang 为
的的名称可以随便取，=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法),但是:参数名称必须和保持一致，虽然不会阻断的运行，但是会报错，也会导致无法捕获数据的变化
注意事项：
目前仅支持内联使用
不要直接引入大型类库,推荐通过创建方法引入
可以使用vue组件的生命周期不可以使用App Page的生命周期
视图层和逻辑层通讯方式与WXS一致,另外可以通过this.$获取当前组件的实例
观测更新的数据在视图层可以直接访问到

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

文章插图
APP端视图层的页面引用资源的路径相对于根目录,例如:.//test.js
APP端可以使用dom bom API ,不可直接访问逻辑层数据,不可使用uni或其他框架的API(如:uni.)，需在原生层调用后触发监听将数据传入
H5端逻辑基层和视图层实际运行在同一个环境下,相当于使用mixin,可以直接访问逻辑层数据
在app端层的data与原生层的data互不相干
this.$.方法必须通过点击事件执行
地图方法都要写在层，不能使用子组件
怎样使用？
1.原生层数据通过监听传入层(可以通过调用原生层的方法触发)
按钮#myMap {width: 100%;height: 100vh;}
2.视图中直接调用层方法传出数据

遇到的错误 1、图片绘制跨域问题解决方案may not be
原因就在于使用了跨域的图片或者有两张不同来源的图片比如一张本地一张服务器，所以说是被污染的画布 。
解决方案如下
1、为image请求添加跨域
var image = new Image()image.setAttribute("crossOrigin",'Anonymous')image.src = http://www.kingceram.com/post/src
但也许有可能服务器不让你跨域请求图片（也不知道为啥），那么用到方案2
2、通过把请求的图片转化成再进行使用
代码如下
【uni-app APP、html引入html2canvas截图以及截长图】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()})}


上一篇：uni-app video 获取视频总时长

下一篇：解决Win10本地复制 长时间未反应问题