收藏
回答

Canvas的drawImage画出的图片失真严重,是bug吗?有解决方案吗?

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 API/Canvas 客户端 iOS 6.6.5 1.9.96

在小程序开发中用到Canvas时发现一些问题,逐步调试发现,使用canvas的drawImage接口画出来的图片有严重失真问题:即画出来的图片与实际图片有差异(虽然肉眼很难察觉)。



重现方法1:

  1. 选定一张图片,将它拷贝成2份,称他们A和B

  2. 然后调用drawImage接口,分别将A和B画到2个同样大小的canvas(canvas的尺寸与图片的尺寸一致,即图片为100*100的话,那么canvas的大小也设定为100*100),

  3. 调用canvasGetImageData分别获取这2个canvas内的图片数据,进行比较。

  4. 结果竟然是,两个canvas出来的图片数据不相同。


方法2:

  1. 选定一张图片,将它拷贝成2份,称他们A和B

  2. 然后调用drawImage接口,分别将A和B画到2个同样大小的canvas(canvas的尺寸与图片的尺寸一致,即图片为100*100的话,那么canvas的大小也设定为100*100)

  3. 在真机上分别对2个canvas所显示的内容进行截屏,然后用Photoshop打开,逐个对比他们的图像数据,发现两边的像素值竟然也不相同。


下面是使用方法2进行重现时,在Photoshop中对A和B所对应的canvas的内容进行截屏,并对同样部位进行放大,所展示的结果。可以看到,相同的图片的同样区域的像素值确有很大的差异。图中蓝色箭头所指的像素点的像素值为一个示例,其他像素点的RGB值也都或多或少有差异。



            图片A被drawImage到canvas,然后对其截屏并放大某个区域




            图片B被drawImage到canvas,然后对其截屏并放大同一个区域


那么,这个是小程序在canvas方面的一个bug呢?还是我可能使用方法不够正确呢?那是否有什么解决方案呢?


我的目的是要获取两张图片,并对他们的准确的颜色值进行比较(因为我的计算量不算很大,我不想发送到服务器再去处理,希望可以就在本地进行简单的处理。)。如果这个过程中得到的图片的颜色值数据有失真的话,我就无法进行后续的处理了。


希望小程序官方能帮我认真分析研究下,也希望得到各位同学的帮忙,讨论。谢谢大家!


最后一次编辑于  2018-03-23  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

6 个回答

  • 黄思程
    黄思程
    2018-03-23

    麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题

    2018-03-23
    赞同
    回复
  • 一张白纸
    一张白纸
    2018-03-24

    谢谢小程序官方的回复!


    我周末加班加点,写了一个代码片段展示这个问题:方法是选取一张简单的单一色彩的图片,将其画到cavans上,然后通过canvas的canvasGetImageData来获取这个canvas中的图片数据。之后再将获得的图片数据的RGB值与原图的RGB值进行比较,发现两者的RGB值并不一致。原图的所有像素点的RGB为 (62, 74, 93),获取到的图片数据的RGB为(64, 74, 92)


    当然,选取其他颜色也会有这种变化的问题,我还试过(63,76,94),也同样会有变化。


    这种失真,会导致我无法对图片的数据做出正确的处理,因为得到的图片数据已经不是原图的数据了。


    那,为什么画到cavans之后的颜色值会发生变化呢,与canvas的设置有关吗,还是色彩模式的差异呢,有什么办法防止这种变化吗,或者该如何从变化后的值找回原来的值呢?如果这种失真无法避免,那在现在的小程序平台上该如何获取到图片的真实RGB数据呢,有别的接口可以做到吗?




    代码片段的链接如下,请认真研究,并在此回复,非常感谢!


    wechatide://minicode/r3SHX9ml6XYd

    2018-03-24
    赞同
    回复
  • 一张白纸
    一张白纸
    2018-03-26

    @黄思程  您好,请问开始调试我发出来的代码片段了吗?期待您的调查和回复!

    2018-03-26
    赞同
    回复
  • 一张白纸
    一张白纸
    2018-03-28

    腾讯给的这种回复都是做做样子的吗,怎么都接近一个礼拜了,连个音信都没有?

    2018-03-28
    赞同
    回复
  • 黄思程
    黄思程
    2018-04-04

    你好,我在iOS跟安卓上试的都正常的。开发工具确实不一样,但开发工具底层用的h5 canvas,这一块需要调研一下。目前以真机上为准

    2018-04-04
    赞同
    回复
  • 一张白纸
    一张白纸
    2018-04-04

    你好,谢谢你的调研和回复。


    这个问题代码片段在真机上确实是正常的。不过,我之前这个问题确实是在iOS真机上发现的。我之后再在真机上进行测试,看能否重现这个问题,如果重现了,我想办法写个能在真机上重现问题的代码片段,到时候再麻烦你帮我看看。


    谢谢。



    2018-04-04
    赞同
    回复