有关canvas与image之间的爱恨情仇，以及image与移动端硬件的小情绪~~~

最近接了一个私单，需求是生成席卡图片并下载打印。主要还需要在移动端操作。刚开始没当回事，等到测试的时候就懵逼了，使用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()这个方法写入文字。好&