canvas中的那些坑

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

做法当然是用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地址上加时间戳

转载于:https://www.cnblogs.com/superil/p/8462042.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值