谈谈html2canvas在项目中遇见的问题

生成海报的图片模糊不清

这个问题,我百度了很久,最终发现其实我的图片用的是背景图片,在这里不能用背景图片,应该用img,并且img要用div包裹起来,举个例子: <div> <img src="xxxx.png"/></div>另外配置html2canvas的時候只需要把scale放大两倍就可以了

var content = $('.poster'); // 获取生成海报的区域
html2canvas(content[0], {
    scale: 2, // 放大2倍是因为 1倍的时候在高分辨率下会出现模糊的情况
    useCORS: true // 【重要】开启跨域配置
}).then(function(canvas) {
    $('#posterAfter').attr('src', canvas.toDataURL("image/png"));
});

生成海报的区域必须是在屏幕可是化的范围内,不能隐藏,否则可能导致生成的是空白的

我把我做过的分享给大家

demo体验地址:http://hb.xiaohuanzi.cn/源代码:https://gitee.com/wuyifan1995/html2canvas

原文链接:segmentfault.com

上一篇:hawkejs
下一篇:hbs-precompiler

相关推荐

  • 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

    题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 1. 基本概念:标准模型 IE模型(区别) 2. CSS如何设置这两种模型 3. JS如何设置获取盒子模型对应的宽和高 4....

    2 年前
  • 遇见创作 · 遇见 Hve Notes

    图片描述(https://img.javascriptcn.com/4bec88753e198c797dde4bf3b3dca3b8 "图片描述") 作为一个技术人,你是否喜欢创作,或是怀念过往又或...

    1 年前
  • 谈谈虚拟dom和diff算法

    我喜欢带着问题去学习一个东西。所以,在开始看这篇文章开始之前,我先问大家一个问题。 vuejs解决了什么问题? 这里所说的解决的问题是和以前的开发模式比,在没有此类mvvm框架之前,我们主要是通过...

    2 个月前
  • 谈谈深拷贝与浅拷贝

    前言 关于深拷贝和浅拷贝其实是两个比较基础的概念,但是我还是想整理一下,因为里面有很多小细节还是很有意思的。 深拷贝和浅拷贝的区别 深拷贝和浅拷贝是大家经常听到的两个名词,两者到底有什么不同...

    2 年前
  • 谈谈深拷贝、浅拷贝

    前提: 假设您已经知道为什么在JavaScript中需要深拷贝和浅拷贝了。 举两个例子: 在上面数组和对象中分别改变了 和 ,但是最后结果的得到和原来的值保持一致。

    7 个月前
  • 谈谈浏览器渲染

    面试的时候总被问到浏览器渲染原理,其实这块可大可小,所以写篇文章回顾下 当浏览器拿到HTML文档时首先会进行HTML文档解析,构建DOM树。DOM树的构建是从接收文档开始的,然后一边将字节转化为字...

    2 年前
  • 谈谈服务端渲染的理解以及使⽤场景

    Screen Shot 20200518 at 11.54.37 PM.png(/public/upload/540f63c5c7ed6363a1f94b430a14e9b6) 优点: 1.有...

    16 天前
  • 谈谈我用在vue-cli3中预渲染遇到的坑

    前言 在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化。鉴于目前页面也不多,因此首先采用的是预渲染的方式。 本来以为把插件一装,配置一配,咔咔咔就能搞定,结果发现并没...

    1 个月前
  • 谈谈我所认为的mixin在项目中的运用

    无非是三个问题 mixin是什么?mixin干嘛用?mixin怎么用? mixin是什么? 一句话概括,mixin是混入,使用mixin可以减少重复代码,提高代码的复用 mixin干嘛用? ...

    8 个月前
  • 谈谈我对js中定时器的一点理解

    撸了今年阿里、头条和美团的面试,我有一个重要发现....... javascript定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作,它们表现出的行为很直观。

    10 个月前

官方社区

扫码加入 JavaScript 社区