canvas随笔

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

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

canvas随笔

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

  如果不是因为有后面那个需求的话,我根本是想不到canvas的。因为前端似乎没有什么图片生成器,除了现在出的特别厉害的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。从今以后做事不会再这么拖沓了,希望以后能分享出更高含金量的好文章。

上一篇:[Object Tracking] **Mask R-CNN


下一篇:使用WebClient下载网页,用正则匹配需要的内容