最近有个小项目 需要生成海报让用户去分享~~~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. Android客户端与服务器端通过DES加密认证

    转载地址:http://blog.csdn.net/spring21st/article/details/6730283 由于Android应用没有像web开发中的session机制,所以采用PHPS ...

  2. Visual Studio Installer打包安装项目VS2015

    使用VS2015的Visual Studio Installer打包安装项目,虽然整体操作很简单,但还是有几个特殊的点需要记一下,故写下此博客方便以后查阅 第一步,创建安装项目 如下: 里面最左侧的框 ...

  3. PCB测试点的设计要求

    测试点的设计要求:1.定位孔采用非金属化的定位孔 ,误差小于0.05mm.定位孔周围3mm不能有元件.2.测试点直径不小于0.8mm,测试点之间的间距不小于1.27mm,测试点离元件不小于1.27mm ...

  4. sql修改数据库中表的结构

    ALTER TABLE TableName1 ADD | ALTER [COLUMN] FieldName1 FieldType [(nFieldWidth [, nPrecision])] [NUL ...

  5. 09 OCP知识点讲解 之 LRU链与脏LRU链

    OCP知识点讲解 之 LRU链与脏LRU链 分类: Oracle 2012-06-30 10:49:26   一.LRU链: 任何缓存的大小都是有限制的,并且总不如被缓存的数据多.就像Buffer c ...

  6. iOS11.2-11.3.1进行越狱及问题

    设备环境:Electra.iOS11.13.1 PS:Electra最新版本进行越狱只支持11.14以下的版本.同时这是不完美越狱,每次重启手机都需要重新越狱,最后,由于Electra版本推出仓促,一 ...

  7. windows搭建本地IIS服务器+php安装+移动设备内网访问服务器

    启动IIS服务 1. 打开 “控制面板” => "程序" => "启用或关闭Window功能": 2. 接着勾选相应设置: 3. 继续勾选对应目录下 ...

  8. 日期格式操作,在oracle和mysql中的实现

    oracle add_months(日期格式值 , 整数n)  当整数n=12时,代表一年,向后推迟一年,若n=-12代表回退一年 如 to_char(add_months(to_date('2018 ...

  9. php http_build_query stream_context_create post请求

    <?php function send_post($url, $post_data) { $postdata = http_build_query($post_data); $options = ...

  10. php 算法(冒泡排序)

    //冒泡排序(从小到大)       (从大到小改变for循环中的大于号为小于号即可)    public function index(){          $arr = array(1,8,3, ...