页面转换为图片保存到手机html2canvas、base64ToPath_html2canvas保存图片到手机相册

页面转换为图片保存到手机html2canvas、base64ToPath

本人只解决了 html2canvas、base64ToPath的引入问题，本文章解决方案并不完整

完整示例请参考 uni-app 中使用 html2canvas 生成图片（支持多端）_不想搬砖。的博客-CSDN博客

使用html2canvas将页面标签转换为图片。

1、引入html2canvas

因为uniapp中不好使用npm安装，我们到html2canvas官网下载他的集成js文件引入使用。

html2canvas地址： html2canvas - Screenshots with JavaScript *可能打不开需要用vpn

GitHub地址： https://github.com/niklasvh/html2canvas *没找到html2canvas.min.js文件

import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片

生成图片代码

<script lang="renderjs" module="canvasImage">
// 因为用使用dome操作，uniapp只能使用renderjs的方法操作dome
// 这里另外简历一个script 使用renderjs渲染图片避免与其他代码冲突
// canvasImage.generateImage标签中根据id来执行相应模块的事件
import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片
export default {
  methods: {
    imgsave(e,ownerFun) {
     ownerFun.callMethod('_showLoading','正在生成图片') // 生成图片的 loading 提示
      setTimeout(() => {
        const dom = document.getElementById('backBox') // 需要生成图片内容的 dom 节点
        html2canvas(dom, {
          width: dom.clientWidth, //dom 原始宽度
          height: dom.clientHeight,
          scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
          scrollX: 0,
          useCORS: true, //支持跨域
          // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
        }).then((canvas) => {
          // 生成成功
          // html2canvas 生成成功的图片链接需要转成 base64位的url
          ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
        }).catch(err=>{
          // 生成失败 弹出提示弹窗
          ownerFun.callMethod('_errAlert',`【生成图片失败，请重试】${err}`)
      }, 300)
</script>

base64转path的方法在uni的插件市场搜索base64ToPath安装即可

mport { base64ToPath } from "../../../../../js_sdk/mmmm-image-tools/index"; // 图片地址转base64url

最近根据业务需求需要适配h5端，因为uni.saveImageToPhotosAlbum这个api无法在h5中使用，只能调用预览api uni.previewImage 将生成的图片预览出来，让用户自行保存图片

if (navigator) { // 判断是浏览器还是手机 true为手机false为app
        uni.showToast({
          title: "长按保存到手机",
          duration: 2000,
          icon: "none",
        setTimeout(() => {
          uni.previewImage({ // 预览api
            urls: [filePath],// 需要数组的方式
            current: 0,
            indicator: "default",
        }, 1000);
      } else {
        uni.saveImageToPhotosAlbum({
          filePath, // 需要临时文件路径，base64无法保存
          success: () => {
            this._showToast("保存图片成功");
          fail: () => {
            this._showToast("保存图片失败，请重试");
                    页面转换为图片保存到手机html2canvas、base64ToPath本人只解决了 html2canvas、base64ToPath的引入问题，本文章解决方案并不完整完整示例请参考uni-app 中使用 html2canvas 生成图片（支持多端）_不想搬砖。的博客-CSDN博客使用html2canvas将页面标签转换为图片。1、引入html2canvas因为uniapp中不好使用npm安装，我们到html2canvas官网下载他的集成js文件引入使用。html2canvas地址：
html2canvas(document.getElementById("id1"), {
onrendered: function(canvas) {
document.getElementById("id2").appendChild(canvas);//生成画布后如何处理，当然可以在新标签打开，在浮层展示等等
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id
Note:html2canva
				图像和base64的转换记录一、插件地址二、使用步骤1.引入库2.pathToBase643.base64ToPath
使用uniapp开发微信小程序的过程中遇到，需要将图片转换为base64字符串上传
使用工具  image-tools        -------------  HBuilderX插件市场 图像转换工具
一、插件地址
插件传送门
二、使用步骤
1.引入库
代码如下（示例）：
	import {
		pathToBase64,
		base64ToPath
	} from '
或者下载后按包引入
// 以下路径需根据项目实际情况填写
import { pathToBase64, base64ToPath } from 'node_modules/image-tools/index.js'
第三步：使用
pathToBase64
从图像路径转换为base64，uni-app、微信小程序和5+APP使用的路径不支持网络路径，
如果是网络路径需
				在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。  html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。
这是效果图，接下来我们看代码。
<!doctype html>
   <meta charset="utf-8">
   <meta http-equ
```html
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
然后，在你的JavaScript代码中，使用以下代码将截图转换为base64：
```javascript
// 获取要截图的元素
var element = document.getElementById("my-element");
// 使用html2canvas截图并将结果转换为base64
html2canvas(element).then(function(canvas) {
    var base64 = canvas.toDataURL();
    console.log(base64);
在上面的代码中，`my-element`是你要截图的元素的ID。截图完成后，`toDataURL()`方法将返回一个base64字符串，你可以将其用于需要的任何用途。