H5 中html 页面存为图片并长按 保存

最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上。

展示一下最后一页的样子:

刚拿到这个需求,在网上看了很多文章,最普遍的是使用 html2canvas + canvas2image  来实现。于是,跟着前人的脚步,踏上了一个不断采坑采坑采坑的旅程。

下面直接描述我在做这个需求过程中遇到的问题以及解决办法吧:

1.html2canvas 图片跨域:

这个问题网上很多解决办法:

这个是最常用的, 刚开始我只是加了红色框里面的这一句,但是并没有任何作用,依旧报错。后来看到有人说,加上前面那一句,所以果断在加进去。

这两句其实表达的是同一个意思:允许图片跨域。

当然,也有网友说,直接给一个空值就可以,我当时试了一下,并不ok~~~~.

2.多次使用canvas drawImage 方法图片展示问题

2.1 图片加载顺序问题

在我这个需求里面,肯定是文字描述以及二维码是展示在图片上面的,刚开始我是

1. drawImage   文字,

2. drawImage    二维码

3. drawImage   背景大图

然而,结果让我大吃一惊,只有背景图加载渲染出来了。然后,通过无所不能的网络才知道:drawImage 的顺序应该是:图片最底下的需要最先加载渲染。

2.2 图片显示不完整

在2.1 问题出现的同时还遇到了这个问题,图片渲染不完整,这。。nima。。。需求才刚开始做,怎么这样为难一个小女子。。。

不过有问题嘛,就解决咯。

图片渲染不完整,原因就是:在图片还没有加载完成的时候,canvas 就开始进行渲染。

因此解决办法就是:等图片加载完成后再进行drawImage 操作就可以啦,上~~~~代码:

3.canvas 保存为图片的跨域问题

遇到这个问题,我真的是花了一堆一堆的时间来看文章,看博客,,。

这会万能的网友给我的解决办法并没有任何效果:

他们说:1.把图片取下来放在自己服务器上(我用的公司的图片服务器。但是和我的放代码服务器不是同一个地址啊)

2. 用canvas2Image 啊,然而,,这不也是跨域么,,并没有啥,,用。

3.还有啥来着,,忘了,反正那天搞得我精神崩溃,,,也没解决到问题,,后来实在忍不住,问了公司的大神:大神说:你用base64 的呢。。

一语惊喜梦中人,对啊,这种方法多棒,这样就不会跨域了啊。当时为了赶进度,直接在线吧图片转成basa64  ,然后存成一个js 文件。

当时是这样的:红框里表示的是文件的格式。。、

至此,我的html 已经转为canvas  并且从canvas 转为img 存在页面上了,,

后来我在看这一段,觉得似乎不太好,这个文件显得很大,所以我想在用这个文件的时候在把它转成base64 的格式,,

1.利用canvas todataUrl 将图片转为base64

但是这种方法不可避免的会出现跨域的问题,pass

2.base64.js

这个文件中中文转码会出问题,而且我试过了,基本的字符串转码都是ok 的,但是对于文件转码就会出问题

3.浏览器原生的并且都支持的一个东西: window.atob     and   window.btoa

window.atob  是将base64 格式转换为字符串或者二进制编码格式

window.btoa  是将字符串或者二进制编码 格式转换为base64  格式  所以上面的base64.js 真的,,别浪费时间精力去看了,,

那文件编码解码呢?

原生的也有方法:FileRender()  这个构造函数,

var reader = new FileReader();

reader.onload = function(e) {

// e.target.result

};

reader.readAsDataURL(file);

这种方法没有测试过o(╥﹏╥)o。。

所以,目前为止,需要把文件转为base64. 格式的,我并没有找到合适的方法或者js 插件来操作,如果各位有什么好的办法,麻烦告诉我(* ̄︶ ̄)。

4. 图片模糊并且窗口中只显示了一部分

才定义canvas 的时候,我是给canvas 定义了一个宽高的,宽高是背景图的大小,因此在drawImage 的时候是按照canvas 实际尺寸进行渲染。

但是转为图片的时候是按照窗口的尺寸来进行的,因此图片会模糊,如果给图片设置canvas 宽高的话,图片在窗口中又显示不完整。

因此,就需要计算设备的retio,

基本思路:计算出ratio  ---> 然后canvas 转 img (按照canvas 实际尺寸进行渲染) ---> 图片按照窗口大小进行缩放

这个方法直接返回的是设备的ratio..

然后我们在进行canvas 渲染的时候,

在后面进行图片渲染的时候,图片的宽度直接除以 ratio ,这样图片就能完整的显示在窗口中。

 

5. ios10.2 canvas 转图片 一片黑

至此,页面是呈现出来了,并且在我的安卓(华为)上测试是ok

但是需求的同学(ios)告诉我:她的手机上最后一页是黑色的和,顶部有个白色框,,,我一懵,天,不会ios 不支持吧。

于是,用了旁边座位同学的手机。恩,也不行。。

啊啊啊啊啊,要崩溃。

在网上看了一下,有一种解决办法就是:使用双缓冲(出现黑屏的可能就是在drawImage 的时候计算量很大,然后渲染卡顿不成功)

大概思路就是:在新建一个cachecanvas 刚开始其实是把图片渲染在这个缓存的canvas 中的,然后在将cachecanvas 中的内容渲染到需要在页面展示的canvas 中。

我在中间使用了一个延时,时间虽然很短,但是这样也能确保cachacanvas 确实渲染完成在进行正式的canvas 渲染。

这样,我周围座位上的ios 上最后一页都能显示出来了,,但是那个ios10.2 的依旧不行,,啊,网上查了一下,这个版本的问题一直存在,所以,(?_?) ,

就这样,这个需求在我不断采坑的过程中,好像也快完结了,这里很少直接贴代码进来,因为贴进来似乎看的不太好,所以我基本上是截图的。

最后,几个小tips :

1.直接将网页图片存成base64 格式的,如果图片很少,可以,如果图片很多,还是建议不要这么操作了,比较一个base64的数据格式就已经很大了。。。

2.图片先压缩,然后在进行base64格式编码吧

3.对于drawImage 的位置,是相对于canvas  实际尺寸的。所以如果使用百分比,建议先得到窗口的宽高,然后在进行赋值。

4. 在使用canvas   fillText 的时候,有一个限制最大宽度,就是fillText 的最后一个参数(直接写数值即可,不用带单位,默认似乎是px)。

5.对于一般的H5,还是对图片进行预加载一下吧,。。(网上很多图片预加载的方法,自行查找哦)。

原文地址:https://www.cnblogs.com/autumn123/p/9606451.html

时间: 2024-11-07 19:06:13

H5 中html 页面存为图片并长按 保存的相关文章

jQ处理页面中尺寸过大的图片

这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用css的max-width来加以 控制,但ie6却不吃这套.我在做一个站时,就遇到这种困惑,因为最近也在学习jQuery,就想到用jq来处理这个问题.经过一番思索,觉得这个问题其 实并不难,下面就具体来说: 一.思路: 要解决尺寸问题,首先要先获取图片的宽和高,然后定义一个最大宽度,进行判断,如果实际宽度大于设定的最大宽度,那么就让实际宽度等于最大宽度,至于高度就按照高宽比进行比例缩小即可.

从web图片裁剪出发:了解H5中的canvas

本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进入正文.在上一回<从web图片裁剪出发:了解H5中的blob>中我解释了图片在浏览器中以怎样的形式留存,并且在最后一个example中演示了选择图片.预览最后提交的过程.然而这个预览并没有起到什么卵用,因为只能预览不能处理,原图片还是原图片,预览变得可有可无.这一篇我们就在预览这一步里做点手脚,加

微信中通过页面(H5)直接打开本地app的解决方案

简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了"微下载"之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安装就直接打开,没有安装的话就是腾讯微下载的页面进行app下载,当然微下载的页面腾讯提供了几个模板,可以自己选择和修改. IOS实现:ios像直接点击链接打开本地app就难了,有两种方式可供我们选择: 1.腾讯深度合作的公司,微信可以帮你打开app: 2.使用IOS9+的新功能"U

h5页面转图片长按保存

5页面经常会遇到此类需求.将最后的结果页转换为图片长按保存.下面介绍一下实现此需求的过程 1,依赖安装 cnpm install html2canvas --save 2,依赖引入,使用 绑定 初始化 由此,页面转换为图片完成 原文地址:https://www.cnblogs.com/shmily-code/p/9667151.html

H5移动端页面设计心得分享

去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有帮助. 字体 排版 在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优. 比如JDC的“拍拍十二星座实用手册”的项目,只用了最简单的图形和文字居中摆放. 以可口可乐的这个“我们在这 我们在乎”为例,相较而言,越左边的排版会越容易引

用H5中的Canvas等技术制作海报

在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作--预览旋转合成> 这次有时间就实现一个功能稍微多点的海报. 一.概要 第一屏 第二屏 第三屏 总共有三屏,第一屏是选择图片,第二屏是合成图片,第三屏是显示结果图,可保存分享朋友圈. 页面内容不是很多,分析起来也比较简单. 1)每一屏的左右边距相同,上边距各不相同. 2)屏幕内的元素,大部分是居中,有些特

H5移动端页面设计心得分享(转载)

去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有帮助. 字体 排版 在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优. 比如JDC的“拍拍十二星座实用手册”的项目,只用了最简单的图形和文字居中摆放. 以可口可乐的这个“我们在这 我们在乎”为例,相较而言,越左边的排版会越容易引

JSP+Servlet中使用jspsmartupload.jar进行图片上传下载

JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post" enctype="multipart/form-data"> <input type="file" name="myfile"> <input type="text" name="cmt&q

ngRoute+ngAnimate与JQM中的页面跳转的区别

1.ngRoute+ngAnimate与jQM中的页面跳转有何异同? 相同点: (1)完整的HTML只需要一个 (2)使用异步AJAX请求获取下一个页面 (3)可以实现转场动画 不同点: (1)ngRoute需要配置路由字典:jQM没有,更加灵活 (2)ngRoute访问路由地址的格式——特殊格式的hash http://xxx/index.html#/main jQM访问页面地址——普通的URL http://xxx/tpl/main.html (3)ngRoute访问的路由页面可以使用F5刷