img标签展示的图片清晰度远远高于背景图片

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

img标签展示的图片清晰度远远高于背景图片

实际代码

网页部分我用的是vue，需要先安装。

npm install html2canvas

页面中介绍的

import html2canvas from 'html2canvas';

需要截图的dom节点添加ref属性

"page">

截图代码

...
document.body.scrollTop = 0;
// 将页面滚动至顶部后再开始截图，才能保证截图的完整
html2canvas(this.$refs.page, {
  allowTaint: false,
  useCORS: true,
  width: document.body.scrollWidth,
  height: document.body.scrollHeight
  // 实际体验中发现*好设置宽高为页面的宽高才能获得完整的截图
}).then(canvas => {
  this.savedPic = canvas.toDataURL('images/png')
  // 用于在页面中展示的截图完成的网址
  ...
  // 以下代码为模拟a标签的点击直接下载截图
  // 但是这部分代码在移动端网页和小程序中并不会生效
  let a = document.createElement('a'),
    blob = this.dataURLToBlob(canvas.toDataURL('images/png'));
  a.setAttribute('href', URL.createObjectURL(blob));
  a.setAttribute('download', 'pic.png');
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(blob);
  document.body.removeChild(a);
});
...

兼容性

毕竟网页不是原生小程序，还是会存在一些兼容性问题。 例如，生成的截图无法直接在网页中使用小程序的wx.um保存。 移动端和微信也不支持模拟点击标签下载图片。 *终只能通过显示生成的截图并提示用户长按图片来实现保存图片的功能。 用户体验会差一些，但是考虑到截图效果比wxml-to-好很多微信小程序页面开发，还是可以接受的。

*后，我们来谈谈支持。 实际使用中发现不支持的样式是阴影和伪元素img标签展示的图片清晰度远远高于背景图片，其他的基本都支持。 网页中的图片必须是本地图片或者支持跨域的网络图片。 使用图片的地方，建议直接使用img标签，而不是背景图片。 img标签显示的图像清晰度远高于背景图像。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等