使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)

这篇具有很好参考价值的文章主要介绍了使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用html2canvas将页面转换成图片的采坑记录

 "html2canvas": "^1.4.1",
 "@tarojs/taro": "3.4.0-beta.0"

问题:

1. 生成的图片很模糊
2. 生成的图片是空白
3. 生成的图片不完整

截图前是这样
html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序
截图后这样
html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序
截图后的图片图片缺省了一部分

解决方案

问题1: 生成的图片很模糊(图片跨域)

方法一: 将canvas放大n倍再作图;

移动端的话,根据移动设备的devicePixelRatio (devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比)决定缩放比例;也可以默认放大两倍转换

方法二: 使用<img>来实现background-image的效果

只有作为background-image的背景图会模糊,而<img>图片标签是没有这个问题的。

问题2: 生成的图片是空白(图片跨域)

首先确定转换后的canvas的宽高是否正确,如果不正确,就需要给html2canvas传递宽高参数 !!!

没有宽高问题,然后再细细排查发现,在使用 转换的时候图片有跨域问题,导致转换失败,所以转换成了空白图片(大概率都是这个原因);将图片去掉就可以正常转换页面的

html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序

解决方案:

方案一:

后端需要在服务器IIS上的HTTP响应标头设置,最简单粗暴的方法就是全部设置成*,不过这样安全性也低,自己可以根据自己需求设置

access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*
方案二:

在要生成canvas的DOM中的每一个img标签上设置 crossorigin="anonymous" 属性,并且给资源地址加上固定的随机数(避免缓存)

  1. 给html2anvas添加useCORS:true属性
  2. 给要生成canvas的DOM中的每一个img标签上设置 crossorigin="anonymous" 属性
  3. 确保你的图片CDN服务器支持CORS访问,也就是会返回Access-Control-Allow-Origin等响应头

在Taro中给img加上该属性之后没生效,因为
html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序在taro中节点被把包裹了一层taro-image-core节点导致img属性并没有设置到img上(所有在taro上该方法不适用)

方案三:

使用html2canvas提供的跨域解决方案
allowTaint: trueuseCORS: true 都是解决跨域问题的方式,不同的是使用allowTaint 会对canvas造成污染,导致无法使用canvas.toDataURL 方法;所以这里就给html2canvas添加useCORS: true,试了一下还是跨域 -.-

方案四

修改html2canvas的源码(最终解决方案)
核心思想也就是使用方法二,修改html2canvas源码:

html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序
html2canvas图片模糊,Taro+Nutui+ts,小程序,项目开发的爬坑记录合集,前端,taro,小程序

1.给 html2canvas添加useCORS: true 参数
2. 设置 img.crossOrigin = 'anonymous'(img.crossOrigin = ""img.crossOrigin = 'anonymous’是等价的)
3.给资源地址添加
时间戳数/一个固定的字符串
,避免读取到浏览器缓存数据,推荐后者

设置好红框里的内容之后就可以成功的转换了;也没有跨域的错了

由于项目限制,我的图片是不支持CORS访问的,所以选择了方案四解决问题

问题3: 生成的图片不完整

截图不完整是因为我将该图片进行了旋转,解决方案就是:

第一步: 给该图片元素添加一个正方形的父元素

给足空间,保证该图片元素在旋转都在这个容器内

第二步: 一般情况步骤一就可以解决问题了,但我在设置了第一步之后图片还是不完整

经排查发现子元素图片有设置 overflow: hidden;(因为taro在img节点外包裹了一层 taro-image-core节点 小程序),需要将overflow: hidden改成 overflow: visible 问题就解决了

Taro h5代码:

let node = document.querySelector('#html2canvas-dom');
html2canvas(element, {
    useCORS: true,
    scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
    width: node?.clientWidth || canvasOption.width,
    height: node?.clientHeight || canvasOption.height
}).then(canvas => {
    // imgUrl 是图片的 base64格式
    const imgurl = canvas.toDataURL('image/png');
    Taro.uploadFile({
        url: '***',
        filePath: imgurl,
        name: 'file',
        header: {
            'X-Auth-Token': '****'
        },
        formData: {
            method: 'POST',
            fileType: 'png'
        },
        success: res => {
            // ...
        }
    });
});

参考
html2canvas 采坑记录
html2canvas跨域
html2canvas截图如何解决跨域
dom从旋转html2canvas截取图片文章来源地址https://www.toymoban.com/news/detail-754810.html

到了这里,关于使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序采用html2canvas实现html转canvas保存图片

    mpaas小程序中采用html2canvas实现html转canvas保存图片 使用uniapp将代码打包一份h5部署到服务器 h5要保存的图片组件页面report.vue 安装 npm install --save html2canvas 或 yarn add html2canvas 引入import html2canvas from ‘html2canvas’; ts 小程序中采用webview跳转到h5页面

    2024年02月11日
    浏览(44)
  • html2canvas 下载图片,scale、dpi处理图像模糊

    1、安装html2canvas 依赖 2、 引入html2canvas.js 3、html 4、方法,scale和dpi 解决模糊 html2canvas.js是从git上下载的: https://github.com/eKoopmans/html2canvas/tree/develop/dist 单纯下载图片方法 === 参考: 1、解决html2canvas截图模糊的问题 2、html2canvas生成图片模糊 不清楚?两种解决方法 3、html2canvas在

    2024年02月17日
    浏览(48)
  • uniapp APP端使用html2canvas截图分享小程序卡片图片模糊、跨域等问题解决

    项目场景:uniapp  APP端,分享小程序到微信好友,使用html2canvas截取当前页面做卡片封面图。仅是需要展示部分内容用作卡片封面就可以,不强制需要全屏截图。 问题1、部分页面截取到的图片分享到微信后卡片图片模糊。 问题2、截图时报错:Failed to execute \\\'toDataURL\\\' on \\\'HTMLC

    2024年02月05日
    浏览(80)
  • Html2canvas——图片空白的几种排查解决方案

    下列文章来源该篇   一、工作原理 html2canvas库的工作原理并不是真正的“截图”,而是读取网页上的目标DOM节点的信息来绘制canvas,所以它并不支持所有的css属性。 二、在 img标签中加载外部图片 前提是外部图片允许跨域,需要服务器设置 以nginx为例,response-header内要存在

    2024年03月20日
    浏览(44)
  • html2canvas使用文档

    Install NPM Install Yarn 以 vue 举例,这样写起来比较方便 如果想要将图片导出,可以这样写 名称 默认值 描述 allowTaint false 是否允许跨源图像污染画布 backgroundColor #ffffff 画布背景色(如果在DOM中未指定),为透明设置null canvas null 用作绘图基础的现有画布元素 foreignObjectRendering

    2024年03月28日
    浏览(54)
  • html2canvas使用指南

      最近项目中需要使用到将网页中的内容下载成图片,通过按钮点击将页面保存下来,方便同事使用进行工作汇报。如图: 然后我想到了 html2canvas ,就可以解决我现在遇到的问题了。我火速从官网下载了js文件,这里附上链接:   http://html2canvas.hertzen.com/  这里   html2canvas

    2024年02月14日
    浏览(55)
  • 纯前端--原生js将html页面变成pdf文件(html2canvas+jsPDF)

    1、将文档放在本地,用原生js进行引用和使用。 ① 新建一个名为 html2canvas.min.js 的文件,并且将线上的内容进行复制。 ② 引入 js 文件: 2、使用 npm 进行安装使用: 待续。。。 github 中文网站 CDN Jspdf.es.js:ES 2015 模块格式。 Jspdf.umd.js:UMD模块格式,用于 AMD 或脚本标签加载

    2024年02月08日
    浏览(57)
  • vue2如何将页面生成 pdf 导出 html2Canvas + jspdf

    npm i html2canvas npm i jspdf import html2canvas from \\\'html2canvas\\\'; import jsPDF from \\\'jspdf\\\' export const htmlToPDF = async (htmlId, title = \\\"报表\\\", bgColor = \\\"#fff\\\") = {   let pdfDom = document.getElementById(htmlId)   pdfDom.style.padding = \\\'0 10px !important\\\'   const A4Width = 595.28;   const A4Height = 841.89;   let canvas = await html2canvas(pd

    2024年02月16日
    浏览(55)
  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(56)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包