更新记录

1.1.6（2024-03-08）

1. 更新示例工程
2. 更新文档

1.1.5（2024-02-29）

1. 更新示例工程示例四：横向长截图

1.1.4（2024-02-27）

1. 更新base64ToPath方法，以供需要用临时路径保存文件的小伙伴，见示例一中使用

平台兼容性

sp-html2canvas-render

props

props: {
    // 要渲染dom的id
    domId: {
        type: String,
        default: ''
    }
}

emit

@renderOver(e)      渲染完成回调，参数e:生成的base64图片

使用方式

<sp-html2canvas-render domId="render-dom" @renderOver="renderOver">
    <!-- 主渲染内容 -->
    <view class="render-main">
        <view id="render-dom">要渲染的dom盒子</view>
    </view>
</sp-html2canvas-render>

1. 由于使用renderjs进行的渲染，renderjs目前仅支持内联使用
2. APP无法在逻辑层直接获取到渲染层的dom，因此对document的操作只能在renderjs中
3. renderjs目前uniapp官方只支持APP和H5的使用，暂不支持小程序
4. 在H5端，在作者公司的电脑上极限测试了一下（电脑是HP ZHAN 99 Pro G4 Microtower PC，16g，win11），最长可截1.9万像素左右长度的盒子，生成大约2.1万像素左右长度的图了，见上述预览图（当然这和图片内容的复杂度有很大关系，越复杂的图，越长就越慢甚至过长会导致崩溃，我这里测试的仅仅约等于空白行的高度😂），其他端还未进行极限长度测试，如有小伙伴测过，还麻烦能给个评论留言谢谢。
5. 注意截屏图过长时回显可能伴随着屏幕闪烁（不确定是不是image标签中加载的图片太长导致的），因此截很长很长的屏若要回显建议加个loading动画。

可能遇到的问题

1. toDataURL on HTMLCanvasElement 该报错为图片污染了要渲染的canvas画布，先注释掉要渲染dom盒子内的图片看看还会不会报错，部分解决方式的博客如下：
   1. html2canvas 截图空白 或出现toDataURL on HTMLCanvasElement或img标签没截下来 的所有解决办法
   2. 图片跨域导致的原因
   3. 如果以上文章以及网上系列文章都不能解决这个报错，那么建议将需要渲染的图片转换为base64格式再进行渲染，base64格式图片不会存在任何跨域和其他问题。
   4. 使用base64出现问题请移步：uniapp中image组件显示base64图片的方法，uniapp image标签base64不显示图片的问题
   5. 如果源码实例中报错 toDataURL on HTMLCanvasElement 还请注释掉源码相应页面中的图片看看还会不会报错，部分报错在评论区以及问答帖中已解决，还请耐心看完大家的问题看看有没有和自己一样的问题！如果解决不了，还请在评论区或问答帖留言，我会及时回复。原先个人在业务中碰到的需求，故封装了组件开源，还请大家用的时候能手下留情。

图片跨域

1. toDataURL on HTMLCanvasElement都是图片不支持跨域导致的。开发者工具可能可以正确画布出来并导出为图片，但是手机画布导出的时候就会报错，这个时候就需要转成base64 了，先尝试用代码转，如果不能转，就在站点 在线base64图片互转，然后把base64保存到文件里面。
2. 可能有些比较顽固的图片，使用urlToBase64也会直接报跨域问题，那只好请求后端大大解除一下跨域限制了o(╥﹏╥)o

重要更新

自1.0.9版本，插件更新内置了urlToBase64和pathToBase64工具方法，图片报错toDataURL on HTMLCanvasElement或其他问题导致图片无法正常渲染的，可以使用该工具方法将图片路径(支持网络路径和本地相对路径)转换为base64格式

使用方式如示例工程中例2：

// 实例伪代码：

<image style="width: 200px" :src="webImageBase" mode="widthFix" />
<image style="width: 200px" :src="locImageBase" mode="widthFix" />

import { urlToBase64 } from '@/uni_modules/sp-html2canvas-render/components/sp-html2canvas-render/util.js'

function handleImage() {
  // 使用urlToBase64将图片转换为base64格式，以防止toDataURL on HTMLCanvasElement报错
  urlToBase64('https://img.yzcdn.cn/vant/cat.jpeg').then((res) => {
    this.webImageBase = res
  })
  urlToBase64('../../static/logo.png').then((res) => {
    this.locImageBase = res
  })
}

重大更新（v1.1.1 2024-02-06）

自2024-02-06日将出v1.1.1版本重大更新，部分写法将修改，自由度更高，更加完善

1.不再推荐内联方式

v1.1.1版本推荐使用组件方式使用，完全可以作为一个常规的组件，无论是简洁度还是自由度都打破了原先renderjs内联写法的局限性，所以不再推荐示例工程中内联方式案例使用了

2.组件化使用方式

<template>
  <view class="index">
    <sp-html2canvas-render
      domId="render-dom"
      ref="renderRef"
      @renderOver="renderOver"
    ></sp-html2canvas-render>
    <!-- 主渲染内容 -->
    <view id="render-dom" class="render-content">
      <h4>有问题欢迎进群讨论，QQ交流群: 852637893</h4>
    </view>
    <!-- 导出按钮自定义 -->
    <button @click="cusRenderDom">导出</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    renderOver(e) {
      // e为导出截图的base64格式文件
      console.log('==== renderOver :', e)
    },
    cusRenderDom() {
      // 调用组件实例中h2cRenderDom方法
      this.$refs.renderRef.h2cRenderDom()
    }
  }
}
</script>

// props参数
props: {
  // 要渲染dom的id
  domId: {
    type: String,
    default: ''
  }
}

// emit事件
renderOver // 截图渲染完成时触发

// 组件方法
h2cRenderDom // 手动一键触发dom从渲染成canvas至导出成图片base64格式的一些列操作的事件

注意

sp-html2canvas-render不再推荐将要渲染的dom盒子放在组件内部，任由开发者自定义，要渲染的内容只和绑定的domId有关

写在最后

若对插件有任何疑问或者优化建议，欢迎在评论区留言，在插件市场中的私信消息本人可能不经常留意，导致没能及时回复， 可以加入本人的插件问答QQ交流群: 852637893，欢迎进群交流。