用原生js和html5进行网页截图,使用JS实现网页截图并保存

需求

今天接到一个新需求，需要在手机上实现对某张定位实现的自定义图片来生成一个邀请函，然后分享。这个邀请函是必须是一张图片，由于后端图形拼接太麻烦，于是这个锅就到了前端。而且项目要求比较急，没有时间去研究canvas的图形拼接，就想到了之前做过的网页截图

实现

实现这个方法基于两个库，html2canvas和canvas2img

首先引入这两个库，然后使用html2canvas来对在页面加载完成之后的内容生成canvas

html2canvas($('#model'), {

logging: false,

useCORS: false,

proxy: false,

onrendered: function (canvas) {

// canvas 就是绘制的canvas是对象

// var url = canvas.toDataURL();

// $('#newImg').attr('src', url);

// 使用canvas2image将canvas转化为图片，直接返回一个img节点

var u = Canvas2Image.convertToPNG(canvas, width, height);

}

});

实现截图之后发现两个问题：

html2canvas截取的是实际尺寸的图片，在手机的高分辨率的情况下，分享出去的图片非常的虚

html2canvas无法截取跨域的资源，比如微信头像

解决问题：

1.html2canvas截取的是实际尺寸的图片，在手机的高分辨率的情况下，分享出去的图片非常的虚

时间紧任务急，是时候呼叫万能的bing了(百度坑爹)

感谢这位大神提供的解决方案

注意：在这个解决方案下，外层元素不能使用百分比，会导致不正常缩放使得文字错位的。

2.html2canvas无法截取跨域的资源，比如微信头像

跨域无解，交给后端转base64啦

用原生js和html5进行网页截图,使用JS实现网页截图并保存相关推荐

js打印html5,控制台打印文字效果js插件-typed.js
typed.js是一款模拟控制台打印文字效果的js插件.typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果. 安装可以通过bower来安装typed.js插件 ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
HTML5+CSS+JS期末大作业：网上书店网页设计(12页) 学生DW网页设计作业成品 web课程设计网页规划与设计 web网页设计与开发
HTML5期末大作业:网上书店网页设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. ...
HTML+CSS+JS网页设计期末课程大作业：音乐在线网站设计——音乐在线听平台网站(26页) 网页设计成品DW静态网页Html5响应式css3
HTML5期末大作业:音乐在线网站设计--音乐在线听平台网站(26页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...
HTML5期末大作业：体育运动足球网站设计——足球(10页) HTML+CSS+JavaScri大学生体育运动网页设计模板代码校园足球网页作业成品学校足球网页制作模板
HTML5期末大作业:体育运动足球网站设计--足球(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
html5录音功能代码,recorder.js 基于 HTML5 实现录音功能
recorder.js 基于 HTML5 实现录音功能2020-06-23 01:49:56 recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件. 前言完全依 ...
LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
Waud.js – 使用HTML5降级处理的Web音频库
Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...
HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

用原生js和html5进行网页截图,使用JS实现网页截图并保存

用原生js和html5进行网页截图,使用JS实现网页截图并保存相关推荐

最新文章

热门文章