canvas随笔

公司刚刚处于创业初期，总是会尝试着做一些新奇的东西。尤其是对于网上一些好玩的东西，总是希望自己也能有一样的功能。不得不说，对于我来说，既是种机遇，也是种挑战。因为这样给了我足够的发展空间，可以按着自己想的去实现功能，可以去选择一些优秀的框架来学习和使用。不过，对于我这样经验还不够的人来说，该怎么选择，也是一种挑战。

不过，说实在的，我还是挺喜欢这样的日子的。老板总是会有些稀奇古怪的想法，来促使着我的成长。就像这次的要说的大楼表白，在老板第一次提起说要做这个功能的时候，我整个人都不是很好，这都是个什么需求？？？先拿个已有的成品来说吧。

在看到网上大楼表白的时候，在老板看来还挺好玩的，就问我说能不能做个这个。看到这个图片我的第一反应是：简单，不就是输入个文字嘛。然后，等我做的时候我发现，好像理想跟现实差距有点大。直接用html加css实现出来的文字根本不是这个效果。尤其是这个文字，仔细看会发现，这不是普通的文字，而是LED灯光效果的文字，到这个时候我才发现这个需求好像并没有我想的那么简单，尤其是做出来的内容是需要当成图片保存下来的。

如果不是因为有后面那个需求的话，我根本是想不到canvas的。因为前端似乎没有什么图片生成器，除了现在出的特别厉害的canvas。可能是我才疏学浅，可能还有什么其他的功能，不过我能想到的也就canvas了。不过这次我主要想写的并不是怎么来做这个大楼表白，因为有了这个想法之后，实现起来已经是很简单了，麻烦的只是调样式而已。如果有兴趣的人可以私信我要源码。

这次要说的是用canvas实现另一个功能，跟之前的类似，实现的是图片的合成的功能，要实现图中二维码的替换。

这里用canvas合成图片的功能的话网上一抓一大把，我这里就不多提了。我这次遇到的问题是，我在我的微信端不管怎么样都生成不了图片了，而在微信调试工具里面确是一点问题都没有。这个问题出的是真的不讲道理，于是我去复制之前大楼表白的代码，发现还是不行，于是我尝试着把把canvas导出出来，发现canvas的确生成了，可是就是卡死在生成图片这一步了，可是在我的微信调试工具中确是一点问题都没有。所以说写代码最怕的不是出错，而是你明明写的好像是对的，而且明明在调试的时候也是可以的，然而就是在实际测试的时候怎么都出不来结果。没办法，只能把所有的都推翻从0开始。于是我从新建了个文件夹，想着换个浏览器调试一下试试看。果然，问题出现了。他终于报错了！！！我这个欣慰啊，总算是知道他是错的了。于是我就想着去百度去查这个bug，然后发现，国内的查不到。。。不死心的我去下载了个FQ软件，没想到还真让我查到了个国外有个跟我错的差不多的哥们，也是canvas导图片失败在求助。然后继续往下翻，总算是找到原因了，他那回复的原文是

You have an image in your canvas that is gotten from a different domain, and that means your canvas is tainted with cross-origin resources.

这句话真是一语点醒梦中人啊，虽然我英语并不是很好，但是我凭我直觉来说，他在告诉我，canvas跨域了。然后我再去查关于canvas跨域的解决方案。网上给出的解决办法是把图片下载到本地，然后在生成图片。这个的话就要靠后端工程师配合了，不过最后来说，这个功能是实现了。

这个随笔感觉真的写的好随意，代码都没有，算是写一写最近的状态吧，整个人迷迷糊糊的，很早想写这篇博客了，可是总是在拖，发现拖着拖着这个状态都没有了。写出来的博客跟当时想的完全不一样。就当一次教训吧，也给自己立个flag。从今以后做事不会再这么拖沓了，希望以后能分享出更高含金量的好文章。