js将网页保存成图片

JavaScript将网页以图片的形式下载到电脑

接到老板需求，有个网页，上面有参赛二维码，不希望用户手动截图，所以问，能不能有个功能（按钮）之类的，点一下就可以把这整个网页直接下载到用户电脑。作为一名 “不怕死” （手动狗头）的前端程序员，当然要接下来这个活咯。

不扯了干正事。。。。。。。

查了查资料，发现html2canvas这个库和FileSaver搭配着用刚好满足需求，那么就上代码。

 <html><body><a onclick="downloadImage()"></a></body></html><script>const downloadImage = function () {html2canvas(document.querySelector("body")).then(function (canvas) {canvas.toBlob(function (blob) {saveAs(blob, new Date().getTime() + ".png");});})}</script>

document.querySelector(“body”)意思就是要把那些内容转成图片，如果你只想转某一部分，那就写那部分最外层的容器id或者class就可以了。

写完之后发现这个功能其实已经可以用了，但是出了点小问题，网页中的图片部分转成图片后，莫名消失了，然后控制太报了CORS错误？？？
啥也别说了，走看看官网的配置项！官网链接地址
发现了一个配置useCORS：是否尝试使用 CORS 从服务器加载图像，那么把这个加上再试试。

 <html><body><a onclick="downloadImage()"></a></body></html><script>const downloadImage = function () {html2canvas(document.querySelector("body"), {useCORS: true}).then(function (canvas) {canvas.toBlob(function (blob) {saveAs(blob, new Date().getTime() + ".png");});})}

这次好多静态图片都没问题了，但是有一个二维码始终报跨域错误。好家伙。。。
不卖关子了，网上好多资料都找了，什么img加cors属性，允许跨域一堆，前端将图片url链接转base64也不行，因为转base64需要使用到XMLHttpRequest库，请求就又会跨域。无奈，谁让咱是全栈呢，前端搞不定就后端搞嘿嘿嘿。

注意：如果图片模糊尽量不要使用background: url(xxx), 使用 img src=“base64” 去替换会发现清楚特别多。

附上后端代码

 public string base64 = string.Empty;string url = string.Format("http://2019.xxxx.com/Qrcode.aspx?code=http://xxxx.chinashop.cc/Pre-registration/3/index.html?qd={0}", zsid);using (WebClient webClient = new WebClient()){byte[] bytes = webClient.DownloadData(url);base64 = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(bytes));}

ok将图片在服务器端转成base64格式，就ok了。
最后优化一下前端代码。

 <html><body><a onclick="downloadImage()"></a></body></html><script>// 也没有怎么优化，就是加个防抖。function debounce(fn, immediate, delay) {let timer = undefined;return function () {if (timer) {clearTimeout(timer);}if (immediate) {let bool = !timer;timer = setTimeout(function () {timer = undefined;}, delay);if (bool) {return fn.apply(this, arguments);}return;}timer = setTimeout(function () {fn.apply(this, arguments)}, delay)}}const downloadImage = debounce(function () {// 加这两行主要是为了，保存图片的时候不希望把这个按钮也保存进去var dom = document.querySelector(".btn_container");// 先隐藏这个按钮dom.style.display = "none";html2canvas(document.querySelector("body"), {useCORS: true}).then(function (canvas) {canvas.toBlob(function (blob) {saveAs(blob, new Date().getTime() + ".png");});// 保存完之后再放开就行了dom.style.display = "flex";})}, true, 1500)

感谢观看。

js将网页保存成图片相关推荐

Chrome浏览器网页保存成图片
Chrome浏览器把整个网页保存成图片 1.使用快捷键 F12打开开发人员工具功能, 2.按快捷键Ctrl + Shift + P(Mac 为 ⌘Command + ⇧Shift + P) 3.输入 ...
js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
如何使用谷歌浏览器Chrome把整个网页保存成图片
简单一句话概括就是: Chrome -> F12 -> Ctrl+Shift+P -> Capture full size screenshot 详细教程: 1.按下F12,打开开发 ...
谷歌浏览器如何将网页保存成图片
ctrl + shift + i 开发开发者工具然后 ctrl + shift + p 输入full ok
基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
使用 html2canvas 将页面保存成图片
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏,比如移动端常见的"长按网页保存为图片"功能.这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示 ...
前端-如何将网页保存为图片
问题重现前台生成一张复杂的海报,海报中包含外链图片资源问题难点网页由多个内容组成,前端不好将整个网页保存为图片.当然,可以使用canvas进行绘图(canvas语法参考) 网页中存在外链图片资源 ...

js将网页保存成图片

JavaScript将网页以图片的形式下载到电脑

js将网页保存成图片相关推荐

最新文章

热门文章