码迷,mamicode.com
首页 > 其他好文 > 详细

canvas中的那些坑

时间:2018-02-23 15:57:50      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:地址   用户   就是   div   cdn   跨域   需要   gpo   上下   

年前做了一个合成图片的小工具,需求大体为:用户输入要在一整张大图片显示的文字、图片及它们所在大图的坐标,合成一张大图用来干啥干啥。

做法当然是用canvas做的。canvas就不细说了,来说说他的坑吧。

坑之一:输入的文字和坐标都是标准的,但是文字就是不给你在标准展示,坐上偏上。

原因:canvas插入文字的坐标(x,y), 不是左上角相对于画布的坐标,是左下角相对于画布的坐标

(1)x:文字左边相对于画布的坐标
(2)y:文字下面相对于画布的坐标,但是,这个y有个baseline的限制,如果需要严格的上下居中时,需要设置一下它的baseline.ctx.textBaseline
坑之二:canvas转化为base64图片时,画布上如果有不在统一域名的图片会报错
解决方法:
需要设置跨域的图片允许跨域
Image.setAttribute(‘crossOrigin‘, ‘anonymous‘);
crossOrigin="anonymous"在img标签里设
但是也存在设置了属性后还报错的情况,这时候你要看看是不是同时请求了同一张图片,这种情况下,第一次请求图片他会带请求头,第二次请求这张图片时,他会直接取缓存中的数据,然后就挂了。
有篇文章介绍的特别好,但是我找不到了,就记着,这玩意还有一种情况跟cdn有关,也是会拿缓存,解决方法是请求的src地址上加时间戳

canvas中的那些坑

标签:地址   用户   就是   div   cdn   跨域   需要   gpo   上下   

原文地址:https://www.cnblogs.com/superil/p/8462042.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!