html5 canvas画不出图像的原因
2013-08-31 22:39
267 查看
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受。6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题。
做一个图像查看器(基于Chrome浏览器),可以旋转缩放,在一位同事的代码的基础上进行修改,因为同事使用了html5中的canvas,不过他那边最大放大倍数只有3倍,而我这边最大放大倍数为8倍,这样,问题就出现了,测试人员A把某一张图像放大到第8倍的时候,图像突然不见了,而她说在另外一个测试人员B的电脑上测试则不会出现图像消失,我猜想会不会是浏览器版本不同的原因,因为在我这边不会出现这个问题,我的浏览器版本是26....,而测试人员A的浏览器版本是28...。我在开发人员C的浏览器上进行测试,他的版本也是28....,他的也不会出现消失的情况,然后去了组长的浏览器测试,他的浏览器版本跟我一样是26...,组长的也出现图像消失,这样排除了浏览器版本产生的原因。后来,我在测试人员A的浏览器用比较小的图像测试,不会出现消失,在我的浏览器上用一张很大的图像,大于1440X900,放大到第八倍,也没有出现消失,想到做下压力测试,放大个20倍试试,还不会消失,再试试60倍,图像消失了。从这里可以看出,图像大小及放大倍数与图像消失是有关系的。
我们的电脑的硬件配置是一样的,所以暂时想不出什么原因,在网上搜索canvas画图的相关资料,看到有些说用GPU加速canvas的,后来发现Chrome也有支持硬件加速画布的选项,因为学过GPU加速,CUDA编程,知道有时候使用GPU加速反而慢了,因为数据传输带宽存在瓶颈,大家的显卡都用Intel的集成GPU(测试人员A的另一个电脑使用带NVidia
GPU芯片的独立显卡,不会出现消失的情况,而且速度很快),然后在stackoverflow上找到一个评论,说在Chrome GPU设置上把支持硬件加速画布停用,就可以,尝试后,发现之前出现图像消失的浏览器确实不会再出现图像消失了,(可以看出硬件加速不一定就快了)。但是现在还是不懂的是,为什么大家的硬件配置一样,浏览器的设置一样,为什么有些会消失,有些不会,本来想继续测试,看到底是哪部分不同,之前用GPU-Z.0.7.2查看了显卡的信息,及使用情况,没有区别,现在猜想可能是由于在canvas画图的时候,数据还没有传到GPU端,所以就没画出来。
虽然在浏览器上进行设置解决了图像消失的问题,但是组长觉得设置浏览器的方式不太好,所以最后另一位同事采用CSS3写了图像的旋转与缩放,不会出现消失的问题,代码相对也简洁很多,而且即使放到100倍也没问题。
做一个图像查看器(基于Chrome浏览器),可以旋转缩放,在一位同事的代码的基础上进行修改,因为同事使用了html5中的canvas,不过他那边最大放大倍数只有3倍,而我这边最大放大倍数为8倍,这样,问题就出现了,测试人员A把某一张图像放大到第8倍的时候,图像突然不见了,而她说在另外一个测试人员B的电脑上测试则不会出现图像消失,我猜想会不会是浏览器版本不同的原因,因为在我这边不会出现这个问题,我的浏览器版本是26....,而测试人员A的浏览器版本是28...。我在开发人员C的浏览器上进行测试,他的版本也是28....,他的也不会出现消失的情况,然后去了组长的浏览器测试,他的浏览器版本跟我一样是26...,组长的也出现图像消失,这样排除了浏览器版本产生的原因。后来,我在测试人员A的浏览器用比较小的图像测试,不会出现消失,在我的浏览器上用一张很大的图像,大于1440X900,放大到第八倍,也没有出现消失,想到做下压力测试,放大个20倍试试,还不会消失,再试试60倍,图像消失了。从这里可以看出,图像大小及放大倍数与图像消失是有关系的。
我们的电脑的硬件配置是一样的,所以暂时想不出什么原因,在网上搜索canvas画图的相关资料,看到有些说用GPU加速canvas的,后来发现Chrome也有支持硬件加速画布的选项,因为学过GPU加速,CUDA编程,知道有时候使用GPU加速反而慢了,因为数据传输带宽存在瓶颈,大家的显卡都用Intel的集成GPU(测试人员A的另一个电脑使用带NVidia
GPU芯片的独立显卡,不会出现消失的情况,而且速度很快),然后在stackoverflow上找到一个评论,说在Chrome GPU设置上把支持硬件加速画布停用,就可以,尝试后,发现之前出现图像消失的浏览器确实不会再出现图像消失了,(可以看出硬件加速不一定就快了)。但是现在还是不懂的是,为什么大家的硬件配置一样,浏览器的设置一样,为什么有些会消失,有些不会,本来想继续测试,看到底是哪部分不同,之前用GPU-Z.0.7.2查看了显卡的信息,及使用情况,没有区别,现在猜想可能是由于在canvas画图的时候,数据还没有传到GPU端,所以就没画出来。
虽然在浏览器上进行设置解决了图像消失的问题,但是组长觉得设置浏览器的方式不太好,所以最后另一位同事采用CSS3写了图像的旋转与缩放,不会出现消失的问题,代码相对也简洁很多,而且即使放到100倍也没问题。
相关文章推荐
- html5 canvas画不出图像的原因
- PHP实现将HTML5中Canvas图像保存到服务器的方法
- HTML5——Canvas画布绘制图像、绘制线型和绘制图片
- HTML5中canvas标签加载图像的问题
- HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- html5学习笔记三:canvas中平移,缩放,旋转等图像变换问题
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
- HTML5标签canvas图像处理
- 使用html5 canvas操作图像像素
- html5 canvas图像-图像的缩放
- html5 canvas图像保存为图片文件
- html5教程 (四)(canvas使用图像)
- 怎样将html5中利用canvas绘制的图像在服务端保存为图片?
- html5中canvas画布同步video播放器播放图像
- html5学习canvas图像处理
- HTML5特性 > Canvas >图像、图案和字体
- HTML5标签canvas图像处理
- html5之Canvas(基础用法,转换矩阵,图像混合)
- H5 canvas无法绘制图像的原因
- html5 canvas学习--操作与使用图像