最近接了一个私单,需求是生成席卡图片并下载打印。主要还需要在移动端操作。刚开始没当回事,等到测试的时候就懵逼了,使用a
标签的download
属性,移动端每种浏览器的下载都五花八门的,有的下载是.bin
文件,有的干脆没反应,没有一种是真正的把图片下载下来的…
还是从头开始说我碰到的问题吧~ 席卡是需要背景图片的,我需要获取到背景图片的File对象,但是由于浏览器的一些政策,我是不能通过img
标签获取到的,只能通过<input type="file">
这种方式获取,但是这种方式是不可行的,折磨ing…最后想到先通过input:file
获取到File对象,然后把它转换成base64的数据格式,存在js
中的一个变量上,这样就可以解决这个小问题了哈哈。紧接着就是把这个背景图片画入canvas里面,再画入文字,然后导出,然后点击下载。然鹅,由于生成的席卡需要有两个面,每个面都需要有这个背景图片,我需要把这个背景图片画入canvas里两遍,而且一遍是旋转了180°的画入,崩溃…我从没接触过canvas啊,我也不知道能不能行,查资料呗,没想到canvas的上下文context
也支持css3
的transform
属性,那我先画第一遍,然后第二遍执行ctx.rotate(Math.PI);
再继续画,不过此时的原点改变了位置。接着写入文字,可以通过context.fillText()
这个方法写入文字。好&
有关canvas与image之间的爱恨情仇,以及image与移动端硬件的小情绪~~~
最新推荐文章于 2024-01-16 00:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)