html2canvas用法即踩坑记录（小程序uniapp框架）

已于 2022-09-22 17:17:33 修改
阅读量4.2k 收藏 12
点赞数 4
文章标签： 小程序 uni-app 前端 vue html
于 2022-09-22 17:15:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55582221/article/details/126992659
版权

在写项目的时候遇到了一个问题，就是需要把生成出来的表格生成图片，可以让用户直接保存下来。之前倒是使用过canvas生成图片，但是需要完全手写，而且样式也没有很多种。

如何使用JS截取HTML页面为图片呢，下面为大家介绍一款JS截图插件html2canvas

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。

html2canvas可以将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

在官网上粘贴过来的，因为官网是英文，我是按照我自己的理解去写的描述。如果有误差，欢迎大家指正。

属性 默认值 描述
allowTaint false 是否允许跨原点图像污染画布
backgroundColor #ffffff 画布背景颜色，如果没有在DOM中指定。为透明设置null
canvas null 现有的画布元素用作绘图的基础
foreignObjectRendering false
最低0.47元/天 解锁文章
绚丽烟火487
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
微信小程序之html5 canvas绘图并保存到系统相册
11-21
开始实现之前先上个效果图   tips 1.网络图片需先配置download域名，可通过wx.getImageInfo转为临时路径； 2.个人习惯问题，我习惯使用async-await语法，所以需要引入regenerator这个库，使用方式可网上查。 一、封装通用微信api返回为Promise对象 /datas/common.js // 封装获取微信图片信息。 export const getWxImageInfo = (imgPath) => { return new Promise((resolve, reject) => { wx.getImageInfo({
uniapp中，H5端使用html2canvas生成海报
sunluyi的博客
10-27 6428
项目中H5需要实现canvas生成海报，于是用了html2canvas，中间各种BUG，其中跨域问题一直没有处理好，后台服务器设置了支持跨域也不可以。最后解决方案是，把网络图片全部转成base64展示，在调用html2canvas保存图片。APP端canvas的用法参考我的另一篇文章，uniapp中使用canvas,APP端支持生成海报并返回临时路径，用来保存到手机 <view class="pick poster" id="poster"> <!-- 这里边是你需要保存的页面样式，.
uniapp 微信小程序 canvas 问题
最新发布
XL984507092的博客
05-27 443
他不支持真机调试，只能通过预览，另外获取 canvas 的图片的时候 ios 预览 canvas 的图片在真机上不能展示是因为 ios 中需要开启 webp 为 true。今天写小程序的时候在真机调试的时候发现 canvas-2d 在真机 上没有效果，获取不到 canvas 信息。
html2canvas（将dom元素转为canvas），wxml2canvas（微信小程序）
xlsl
06-05 6312
1.安装也可以直接js文件 然后引用2. 使用3.属性widthheightx-offsety-offsetscrollXscrollY。
uni-app 使用html2canvas.js + uqrcode.js将页面内容（包含生成的二维码）合成图片
small streamed bun
12-24 2043
1. 下载html2canvas <-- npm --> npm i html2canvas --save <-- yarn --> yarn add html2canvas 2. 下载image-tools <-- npm --> npm i image-tools --save <-- yarn --> yarn add image-tools 3. 在插件市场下载html2canvas组件 也可以使用下面代码 <template> &
uniapp使用html2canvas截图，显示合同
weixin_43859097的博客
05-06 766
目前有个uniapp封装app里展示合同的需求，数据都在页面拼接展示，合同是写到页面里的，数据是活的。用到了html2canvas，renderjs后面可能还有一系列优化需求，持续更新附上官网PS（懒得再开文章）附上另一个展示合同需求：1.合同内容是docx形式展示，2.前端实现签名操作，3.后台合成签名图片和docx后在小程序展示。小程序签名，有现成的插件因为后台使用的插件不支持https，但小程序必须https，故后台设计了多步文件转换（这里前端先不考虑）方法思路如下：（有点绕）
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序中，我们可以通过`wx.createSelectorQuery()`获取到canvas元素，并调用`select()`方法选择它，然后通过`exec()`执行相关操作，获取到`getContext('2d')`对象。 接下来，我们创建环形进度条组件的结构。...
微信小程序canvas实现文字缩放
01-12
在小程序中，我们可以使用`wx.createCanvasContext`方法来获取canvas的绘图上下文对象，这个对象提供了如`drawText`、`fillText`等方法用于在canvas上绘制和填充文字。而实现文字缩放的关键在于调整这些方法中的字体...
html2canvas 将html代码转为图片的使用方法
09-28
html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。这篇文章给大家介绍html2canvas 将html代码转为图片的使用方法，感兴趣的朋友跟随脚本之家小编一起看看吧
推荐开源项目：`wxml2canvas` - 跨平台的小程序页面转Canvas解决方案
gitblog_00037的博客
04-03 1035
推荐开源项目：wxml2canvas - 跨平台的小程序页面转Canvas解决方案 项目地址:https://gitcode.com/gy134340/wxml2canvas 项目简介 wxml2canvas 是一个出色的开源库，它允许开发者将微信小程序（WXML）页面转换为HTML5的Canvas元素。这对于那些需要在小程序中实现动态绘图、屏幕截图或者数据可视化需求的开发人员来说，是一个非常有价...
html2canvas生成图片demo.zip
09-04
html2canvas生成图片的一个小的demo,解决了在当时开发过程中遇到的一些bug，demo内有注释
小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载 保存到手机
snowball的博客
10-17 8423
本文实现，uniapp微信小程序，把页面内容保存为图片，并且下载到手机上，说实话网上找了很多资料，但是效果不理想，直到看了一个开源项目，我知道可以实现了，本文以开源项目uniapp-wxml-to-canvas 为蓝本 记录集成的步骤，以供参考。这些组件可以通过 require 方法引入并使用，也可以在页面的 json 配置文件中进行全局注册，被所有页面调用。通过创建自定义组件，可以让开发者更加方便地完成复杂的交互效果和组件封装，从而提高小程序的可维护性和开发效率。到此功能实现，集成步骤也比较简单，
uni-app生成pdf，依赖html2canvas和jspdf
weixin_42011423的博客
05-14 5045
1.下载插件模块 npm install html2canvas jspdf --save 2.引入插件 import html2canvas from 'html2canvas'; import jspdf from 'jspdf'; 3.功能实现方法 // 下载pdf downPdf() { window.scrollTo(0, 0) //注意这里必须设置为顶部不然会出现图片不全 let that = this; html2canvas(document.q
小程序使用html2canvas_小技巧!H5使用Html2Canvas实现自动截屏
weixin_29161785的博客
01-20 3724
需求场景：用户使用浏览器访问引用，突发异常，但没及时保留犯罪现场，线下质控人员为了能复现缺陷可绞尽脑汁，研发团队也是针对场景进行日志分析，链路重放...可是就是没现场。针对这类场景，除了研发团队对前后台链路及参数加上日志追踪外，如果能加上现场操作图，用于帮助定位问题，那就更直观了。于是，问题来了，如何在html5页面上实现把网页保存为图片。众所周知，html5中可以使用canvas对象进...
关于使用uniapp截图APP内容的两种办法，及一种小程序原生的截图办法
qq_45020145的博客
05-25 7362
【代码】关于使用uniapp截图APP内容的两种办法，及一种小程序原生的截图办法。
html2canvas转图片遇到的坑（图片偏移，图片模糊，字体改变）
热门推荐
jinxi1112的博客
09-24 5万+
最近做了一个分享页面，要求长按保存相册，其中用到了html2canvas，使用比较简单，但是遇到的比较常见的几个坑，来做下总结： 1. 解决图片模糊和偏移 $('.share')是需要转成图片的dom function share() { var width = $('.share')[0].offsetWidth; //dom宽 var height = $('.share')[...
uniapp小程序怎么引入html2canvas
06-10
您好，关于在 Uniapp 小程序中引入 html2canvas 的问题，可以按照以下步骤进行操作： 1. 在 Uniapp 项目的根目录下，打开终端，通过 npm 安装 html2canvas 库，命令如下： ``` npm install html2canvas --save ``` 2. 在需要使用 html2canvas 的页面中，引入 html2canvas 库，可以在 script 标签中使用 import 引入，代码如下： ```javascript import html2canvas from 'html2canvas'; ``` 3. 在需要截图的页面中，将需要截图的 html 元素添加一个 id，方便后面调用。 4. 在需要截图的页面中，使用 html2canvas 将需要截图的元素转换为 canvas 格式，并将其绘制到 canvas 上下文对象中，代码如下： ```javascript html2canvas(document.getElementById('需要截图的元素id')).then(function(canvas) { // 将 canvas 转换为图片，保存到本地或者展示在页面上 }); ``` 需要注意的是，在使用 html2canvas 进行截图时，可能会遇到跨域问题，需要通过配置服务器端的 Access-Control-Allow-Origin 头来解决。同时，在保存 canvas 图片时，也需要注意跨域问题。 希望能对您有所帮助，如有疑问请随时追问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绚丽烟火487

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值