使用 HTML 实现截图-html2canvas使用记录

JavaScript语言 2020-11-13 05:03:51
html 使用 实现 截图 html2canvas


前言

最近项目需求总是有HTML页面生成图片功能,所以就想记录一下自己在过程中遇到的问题,并加深印象,日后如果忘了也可以回顾。我们项目使用的是html2canvas插件,还有其他插件,例如dom-to-image、rasterizehtml,可以根据需求使用。

html2canvas使用问题汇总

项目中引入的是0.5.0-beta4版本的cdn链接,直接调用方法html2canvas(dom,options);第一个参数是你要绘制的dom对象,第二个参数是一些绘制的配置参数,个别参数我尝试了也没搞清楚具体什么作用可以自行看html2canvas文档,对于我用到的直接上代码:

// 生成图片
function generateImg() {
var shareContent = document.body;// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生)dom 宽度
var height = shareContent.offsetHeight;
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量
// var rect = shareContent.getBoundingClientRect();
var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = 3; //像素密度 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
canvas.height = height * scaleBy;
// context.translate(0, -offsetTop); // 画布偏移
context.scale(scaleBy, scaleBy);
html2canvas(shareContent, {
logging: true, // 是否打印日志,默认false
taintTest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width, //dom 原始宽度
height: height, //dom 原始高度
useCORS: true, //允许跨域
onrendered: function(canvas) { // 页面绘制成功后的回调
var url = canvas.toDataURL("image/png");
// 生成图片后的操作
}
});
}

图片模糊解决

  • 由于像素比(DPR = 设备像素/CSS像素)的问题,电脑上截图看着还行,到手机上就会非常模糊。绘制图片时可以根据像素比把图片放大,使用时在定义图片的宽度,也可以自定义缩放比。缩放比也不是越大越好,太大了也可能会出问题。计算像素比的代码:
function getPixelRatio(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
  • 绘图时尽量不要使用背景图片,直接使用img这样会更清晰

图片跨域问题

有次页面中使用了微信头像,设置了useCORS: true不能显示头像,设置allowTaint:true直接报错不能使用toDataURL可能无法导出受污染的画布;web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

  • 修改Nginx配置文件,由于我们项目其他地方也用到了,所以不便修改,可以修改的参考:
location ^~ /wechat_image/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://thirdwx.qlogo.cn/;
}
  • 把图片转换成base64格式并设置CrossOrigin=“anonymous”,尝试后有缓存的情况下还是不能正常生成图片,需要在后面拼接一个随机参数解决缓存问题,Android可以了,但ios上还是不行。
  • 后来发现直接在微信头像的img标签上设置CrossOrigin="anonymous"即<img class="user-img" th:src="${wxUser.headImgUrl}" alt="" crossOrigin="anonymous" />,微信头像的请求头来就有access-control-allow-origin: *,Android和ios上都可以了,如果你之前尝试过其他方法,可能需要清下缓存,不然Android会误导你不能正常显示。
  • 最近又发现一个html2canvas的options里配置proxy为跨域的url。

生成图片替换页面时闪现问题

前面几次生成图片,都没有出现这个问题,最近一次出现了替换时页面一闪,以为是不是图片太大了,我将两个活动的图片保存对比并不是,具体我还是没搞清楚,不过通过先在dom中写一个空的img标签然后生成的src替换给img,判断图片加载完成后再将绘制的dom隐藏掉解决了这个问题。

css样式超出显示省略号消失

html2canvas不支持css样式生成省略号,百度找到了解决方法,通过js判断超过父盒子高度时用省略号替换

$(".info_text_box").each(function () {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.html($p.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});

引入web字体时字体还没有显示就生成图片

window.onload=function(){}是等页面资源加载完毕再执行,但是在ios中并不支持,后来发现当字体大小大于300px时不同字体的宽度差别很大,就通过定时器判断字体大小来判断字体是否加载成功,但最总因为字体文件加载太慢,就放弃了使用特殊字体

// 通过判断字体内容宽度判断字体加载完成
function fn_fontWatch(fontFamily, cb) {
function fn_gen_span_with_font(font) {
var span=document.createElement('span');
span.style.cssText = "display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:" + font;
span.innerHTML = 'BESbswy';
document.body.append(span);
return span;
};
var span_default = fn_gen_span_with_font('serif');
var span_default_width = span_default.offsetWidth;
document.body.removeChild(span_default);
var span_font = fn_gen_span_with_font(fontFamily + ',serif');
var fn_check_loop = function() {
if(span_default_width !== span_font.offsetWidth){
document.body.removeChild(span_font);
cb();
} else {
window.setTimeout(fn_check_loop,500);
}
};
fn_check_loop();
};

其他问题

  • 一次活动需要判断进入页面次序,html2canvas是通过遍历dom绘制图片的,当生成图片时除了js都会重新执行一次,导致类似刷新页面记录次序,最后次序通过ajax请求获取解决了问题;
  • html2canvas只会截取页面中可见的内容,设置了display: nonevisibility:hidden的元素是截取不到的
  • 生成图片时文字有些许变化,比如安卓的数字1就变化特别明显,而且文字的位置有点下移,原因我没找到,影响不大,目前我也没解决;
版权声明
本文为[JavaScript语言]所创,转载请带上原文链接,感谢
https://blog.csdn.net/nnnn1235657/article/details/94895695

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple