canvas保存页面为图片传入服务器的小问题

本文介绍了一个使用HTML5 Canvas和html2canvas插件生成海报的项目案例,详细讲解了如何将DOM转换为图片并提交至服务器的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是朋友做的一个项目,是他们公司成立一周年的手机端的活动页面,挺有意思,拿来分享下。


项目主要功能:1,上传图片

                         2,生成海报(这步就是canvas保存DOM为图片)

                         3,这一步是和第2步一起的(生成海报的时候)

                         4http://www.ehui.net/event/cmPoster/index.html?from=groupmessage&isappinstalled=0(嘿嘿,给你们看下效                                 果,感兴趣可以扒下来看看,谷歌浏览器手机模式看)。


它整体的轮播用的是swiper插件(swiper插件真的特别狠,几乎满足了所有前端的轮播工程,值得安利)。他的上传图片我 就不讲了 ,就是input  type = file。旋转、缩放都是插件。canvas生成海报也是用的html2canvas插件


生成海报传到服务器就涉及到前后端的交互,说到前后端 交互,人们总想到的是ajax。用ajax不是不可以,但是这里用的那个变图片的插件,直接把截图的DOM转换成了Base64,如果用ajax传的话,编码值会特别的长。


简单点就是把base64格式的编码值塞进form表单的input框里提交给后台接口就ok,注意!注意!注意!图片太大会导致编码太长,发到后台会不完整,所以就需要手动设置参数调整图片质量。(0.4就是调整后的值,默认值为1)。



表单提交就先赋值然后submit。



前后端的交互发生在form里。就没ajax什么事了。



特别注意!!!!

用form表单提交的话提交后会默认跳转的action里写的地址,没毛病,必须阻止他!

写个隐藏的iframe,form加个target属性,值为iframe的name的值

<form action="url" method="post" target="iframe">  
    <input type="submit" id="submit" name="submit" value="提交" />  
</form>  
  
<iframe id="frame" name="iframe" style="display:none;"></iframe>  
我查了很多,但基本的都是这种方法,都是把target打开的跳转到那个隐藏的iframe里(隐藏的iframe的name为target的属性值)。

下面我给大家个链接,可以好好看看get/post的区别。

网址:http://www.jb51.net/web/12714.html

希望路过的大神看到哪个地方写的不对的,不吝指正,以免误人子弟。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值