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

本文介绍: script的module的名称可以随便取，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法),但是change:参数名称必须和module保持一致，虽然不会阻断render js的运行，但是会报错，也会导致无法捕获数据的变化。对于UNI APP端的开发而言，由于上并没有 document，不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、open layer、canvas等)也无法有效的使用，因此官方推出了render js 方案，来解决上述问题。

下载安装 html2canvas

方式一，https://www.boot cdn.cn/ CDN网站 下载 html2canvas 插件

在这里插入图片描述

这里下载后放在测项目目录 common下面

页面中引入

方式二、npm方式安装 html2canvas

1、npm方式下载

npm i html2canvas

2、引入 html2canvas

import html2canvas from 'html2canvas'

2，uni–app 框架引入 h tml2ca n va s 插件资源

r end e r js 基础知识

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

设置 script 节点的 lang 为 re nderjs

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

注意事项：

目前仅支持内联使用

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

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

视图层和逻辑层通讯方式与WXS一致,另外可以通过 th is.$ownerIn sta n ce 获取当前组件的Co mp onentDescript or实例

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

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

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

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

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

th is.$ownerInstance.callMeth od方法必须通过点击事件执行

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

renderjs怎样使用？

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

 &lt;template&gt;
  <view&gt;
    <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 ex ported

原因就在于使用了跨域的图片或者有两张不同来源的图片比如一张本地一张服务器，所以说是被污染的画布。
解决方案如下
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.response
        var fileReader = new FileReader()
        fileReader.onloadend = function(e) {
          var result = e.target.result
          resolve(result)
        }
        fileReader.readAsDataURL(blob)
      }
    }
    xhr.onerror = function() {
      reject()
    }
    xhr.send()
  })
}