最近有个小项目 需要生成海报让用户去分享~~~vue做的,海报通过html2canvas 生成。

遇到的最大问题是生成图片的清晰度~~网上找了好多方法。

放大倍数!~网上找的~~
var cntElem = document.querySelector("#capture");
var shareContent = cntElem; //需要截图的包裹的(原生的)DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关,便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
let _this = this;
html2canvas(shareContent, opts).then(canvas => {
})

图片不要以背景图的方式,直接以img标签加载图片通过CSS去处理层次关系

关于html2canvas清晰度的更多相关文章

  1. 基于html2canvas实现网页保存为图片及图片清晰度优化

    一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

  2. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  3. html2canvas用法的总结(转载)

    最近做h5网页,有个功能是用户能长按页面保存为图片,在我们理解就是网页要生成图片然后再让用户长按保存,然后就发现了html2canvas这个框架了,效果挺不错了,但是有几个坑说一下(用的最新版): h ...

  4. Javascript将html转成pdf,下载(html2canvas 和 jsPDF)

    最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-h ...

  5. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

  6. Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法

    // 下载二维码图片的方法 saveImg() { var self = this; html2canvas(document.querySelector(".savePic"), ...

  7. 关于web网页截图的问题(html2canvas插件)

    import html2canvas from 'html2canvas' import jpg from '@/assets/1.jpg';     htmlToImage=(element, ca ...

  8. html2canvas JS截图插件

    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...

  9. html2canvas使用心得

    近两年做了几次微信H5活动的开发,为了达到传播分享的效果,通常最终都需要生成个性化的图片,供用户长按保存分享,在这里就把自己的一些使用心得记录下来,供其他小伙伴借鉴. 这里备注一下,我目前用的是  h ...

随机推荐

  1. 转-四种方案解决ScrollView嵌套ListView问题

    本人网上用的ID是泡面或安卓泡面,学习一年半之前开始从事Android应用开发,这是我写的第一篇Android技术文章,转载请注明出处和作者,有写的不好的地方还请帮忙指出,谢谢. 在工作中,曾多次碰到 ...

  2. ORA-04044: 此处不允许过程, 函数, 程序包或类型和

    用Orale代码建表时,出现 SQL> comment on column SCORE.cno 2 is '学号(外键)';comment on column SCORE.cno is '学号( ...

  3. winform 实现定位

    如何在winform中 导入地图实现定位功能    ? 从网上下个BaiDuMap.htm, 就是个js文件 在form中加入webBrowser控件,然后在窗体的加载事件中写入如下代码 webBro ...

  4. fis3 安装(Linux)

    Linux安装fis3 1,首先安装node环境 https://segmentfault.com/a/1190000004245357 2,安装fis3 http://blog.csdn.net/g ...

  5. [读书笔记] Spring MVC 学习指南 -- 第一章

    控制反转(Inversion of Control, IoC)/ 依赖注入: 比如说,类A依赖于类B,A需要调用B的某一个方法,那么在调用之前,类A必须先获得B的一个示例引用. 通常我们可以在A中写代 ...

  6. redis参数AOF参数的bug

    问题:redis 不想开启AOF了.但是还老是出现BGREWRITEAOF .(本redis版本为4.0.6) 涉及持久化参数设置如下: 排查及结果: 该redis以前开启过 AOF ,后来停止AOF ...

  7. Linux 学习第六天

    一.VIM 1.VIM编辑器 1.1.VIM工作模式 1.1.1.命令模式:复制.剪切.粘贴.搜索等等 1.1.2.输入模式:随意对文件进行内容编辑 1.1.3.末行模式(:):保存退出,编辑环境设置 ...

  8. 【MYSQL笔记】

    1.去重取出id最小的记录 tip:在laravel框架里配置信息database设置了'strict' => true,所以在groupBy时只能select出groupBy后的字段,当想搜索 ...

  9. 7z 压缩解压简单示例

    7z命令行压缩示例: 7z -tZip a test.zip ./test/* -mx0 把test文件夹中所有文件以存储压缩的模式压缩成zip格式的文件,压缩文件为test.zip a为添加选项   ...

  10. VxWorks 7 技术简介

    VxWorks 7 是新一代的嵌入式实时操作系统,全新的架构设计,灵活化的组件配置,高可靠性与安全性,丰富的第三方软件包,极大的方便用户的开发和使用.本文对VxWorks7 的功能做个简要的记录. V ...