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

下载安装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&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 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.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()
  })
}

代码007普通

打赏 收藏 海报 链接