html2canvas的踩坑之路

html2canvas的踩坑之路

前言

早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期.

html2canvas介绍

html2canvas的详细介绍可以点击这里查看,其实简单来说就是通过canvasHTML生成的DOM节点绘制到画布上,再可以通过自己的需求转换成图片.所以官方文档也说了,最后生成的效果不是100%相同的,这一点大家要有心理准备,无论怎样,一点点小瑕疵是肯定有的。

兼容性

PS:微信浏览器使用也是没有问题的哦

使用html2canvas

使用也是十分简单,官网写的很清楚戳这里

踩坑过程

生成的图片里面为什么缺失微信头像或其他图片?

其实涉及到的就是跨域问题,即便是canvas的画布中对于图片的域也是有要求的,那我们应该怎么解决呢?

  1. html2canvas配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)
  2. img标签增加 crossOrigin=‘anonymous‘
  3. 图片服务器配置Access-Control-Allow-Origin 或使用代理

其中第三步是最重要的,不设置则前两步设置了也无效。

服务器需要配置Access-Control-Allow-Origin信息,如PHP添加响应头信息,*通配符表示允许任意域名:

header("Access-Control-Allow-Origin: *");

或者指定域名:

header("Access-Control-Allow-Origin: www.zhangxinxu.com");

但如果不想麻烦后端的人员,那我们前端怎么跨域呢? 那就可以使用代理插件,如: html2canvas-proxy-nodejs 或者是 superagent,我是使用superagent,贴一下示例代码:

const request = require(‘superagent‘) // 导入
const proxHost = ‘https://thirdwx.qlogo.cn‘ // 指定跨域图片的地址
app.use(‘/proxy‘, function (req, res, next) {
  let urlPath = req.url
  console.log(‘urlPath‘, urlPath)
  urlPath = decodeURI(urlPath)
  if (!urlPath) {
    console.log(‘urlPath is null‘)
    return next()
  }
  console.log(‘proxy-request: /proxy->‘ + `${proxHost}${urlPath}`)
  const reqStream = request.get(`${proxHost}${urlPath}`)
  reqStream.on(‘error‘, function (err) {
    console.log(‘error‘, err)
  })
  console.log(‘------reqStream----‘)
  return reqStream.pipe(res)
})

那么最终我在页面中的图片的srchttps://thirdwx.qlogo.cn/xxx 要更改为/proxy/xxx 效果图如下:

2.生成的图片模糊不清且有锯齿瑕疵怎么办?

大部分找到的结果都是使用设备像素比去操作,但实际使用起来,还是会有锯齿。 这个问题苦恼了我很久,并且找了很久的相关资料,总算是功夫不负有心人,让我找到了解决方案,在github里有大神已经提供了解决方案,可以点击这里,大神在源码的基础上增加两个配置项,scaledpi,推荐使用scale参数。

源码位置:https://github.com/eKoopmans/html2canvas/tree/develop/dist

        let imgHeight = window.document.querySelector(‘.content‘).offsetHeight // 获取DOM高度
        let imgWidth = window.document.querySelector(‘.content‘).offsetWidth // 获取DOM宽度
        let scale = window.devicePixelRatio // 获取设备像素比
        html2canvas(window.document.querySelector(‘.content‘), {
            useCORS: true,
            scale: scale,
            width: imgWidth,
            height: imgHeight
        }).then((canvas) => {
          window.document.querySelector(‘.content‘).remove()
          let elemImg = `<img src=‘${canvas.toDataURL(‘image/png‘)}‘ id=‘canvas-img‘ style=‘height: ${imgHeight}px;border-radius: 10px;width:${imgWidth}px‘/>`
          window.document.querySelector(‘.container‘).innerHTML = elemImg
        })

最终生成出来的图片,是清晰并且最接近DOM的图片

3.生成的图片中若包含二维码,微信长按图片偶现无法识别?

这个问题主要出现在使用单页面框架(如VUE)的页面. 感谢 sundaypig提出的解决方案。 很简单,就是不使用路由切换,使用window.location.href直接跳转刷新页面

    location.href="www.abc.com/share/xxx"

PS:这个问题可以解决所有页面中偶现二维码无法识别的情况

4.生成的图片中文字间距较大?

这个暂时无法完美解决,可以尝试用css属性:letter-spacing来设置字间距

原文地址:https://www.cnblogs.com/zhangycun/p/9247707.html

时间: 2024-11-03 03:24:33

html2canvas的踩坑之路的相关文章

踩坑之路_&quot;var name = &#39; &#39;;&quot;_迷之BUG

情景介绍:最近写一个拖拽生成图表的工具,自己的思路每次mousedown的时候动态将this的name属性值赋值给全局中变量(自己手贱测试时直接将变量名命名为了'name',一大波bug还有30s到达战场.....),mouseup时更具当前的全局属性值判断生成的图表类型:就酱... 首先给大家贴个html布局,有图有真相,(虽然简单的要死)正常结果应该是:拖拽 '折线图' 右侧生成折线图,柱状图生成柱状图: 然后我帅气的用 var name = ''; 从此开启bug模式: js代码如下: 出

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(ph

Java踩坑之路

陆陆续续学Java也快一年多了,从开始的一窍不通到现在的初窥门径,我努力过,迷茫过,痛过,乐过,反思过,沉淀过.趁着新年,我希望能把这些东西记下来,就当是我一路走来的脚印. 一.初识网站应用 记得第一次接触Java,是写一个小网站,当时用servlet+tomcat做服务端,数据库是mysql.那时我对于网站应用的概念一片空白,之前接触的都是C++和MFC写桌面程序.我花了一周时间看完了<java servlet programming>这本书,然后我就开始写代码了.但是,真的当我写代码的时候

jQuery升级踩坑之路

1.使用了被废弃的jQuery.browser属性 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquer

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

opencv入门踩坑之路(一)

因为找了个实验室搬砖,所以我开始学opencv和pytorch了 嘿嘿嘿,感觉记录踩过的坑会很有意思嘻嘻嘻 首先是安装opencv,这个贼简单,我用的win10 直接命令行 pip install opencv-python,如果需要安装特定版本,可以pip install opencv-python==版本号,但是直接用默认安装最新版,它不香吗? 接下来测试一下是否成功 版本号出来就说明成功啦 接下来跑第一个demo 这个demo的作用是显示一张图片 from cv2 import cv2 a

react js踩坑之路(一)

讲真如果让我选个主流的mvvm框架做项目,我会果断选择vue,写起来不要太方便哦.但是,pc端要兼容ie8这个坑货,所以pc端只好选用react了啦~移动端果断用vue咯 再来讲讲构建工具,还是基于webpack 和 gulp,然后将react和vue 分开打包相关配置如下 webpack会依次将公用的打包到vendors.js .react的打包到react中,vue相关的打包到vue中,最后剩下的部分打包到load.js中. 下面直接用react实现一个后台页面的container组件吧,这

webpack踩坑之路——构建基本的React+ES6项目

webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求. 废话不多,下面就就看下如何从0搭起我们的构建工具. 安装 全局安装webpack,如果安装后还是提示没有webpack commond,可以尝试通过超级管理员身份安装. $ npm install webpack -g $ sudo npm install webpack -g  或者在项目里进行安装 $ npm install webpack --sa

记录一下安装 mysql 的踩坑之路

坑点: 1.旧的mysql没有删除干净.在安装mysql的时候,没有注意到,在输入 "mysqld install" 指令时跳出来 exits,存在于另一个文件夹之中,这影响了后来的很多操作,包括root之后修改密码,但是一直显示密码不对,在网上搜的时候有一位朋友也遇到了同样的问题:    2.ini文件的配置,参考http://www.runoob.com/mysql/mysql-install.html,我还是在ini文件里配置了databases,如果要手动配置的话,一定要新建一