《Qt5编程入门》Canvas一章一处问题，附赠代码无法运行

wsfxzxb

1. import QtQuick 2.2
   
2. 
   
3. Rectangle {
   
4.     width: 300; height: 180
   
5. 
   
6.     Canvas {
   
7.         id: canvas
   
8.         anchors.fill: parent
   
9.         onImageLoaded: { //当图像加载完成时进行绘制
   
10.             if(canvas.isImageError("http://www.baidu.com/img/bdlogo.gif"))
    
11.             {
    
12.                 console.log("图像加载失败！")
    
13.             }
    
14.             var ctx = getContext('2d')
    
15.             ctx.drawImage("http://www.baidu.com/img/bdlogo.gif", 0, 0)//先将图片绘制在画布上
    
16.             var img = ctx.getImageData(60, 50, 120, 40)//截取画布的一部分保存为一个图像
    
17.             ctx.strokeRect(60, 50, 120, 40)//将截取的部分用黑线框出来
    
18.             console.log(img.width, img.height, img === 0)//【注：这句是我自己后来添加的，以排除问题】
    
19.             ctx.putImageData(img, 10, 100)//在新的位置绘制截取的图像
    
20.             canvas.requestPaint()//请求对整个可见区域进行重绘
    
21.         }
    
22.     }
    
23. 
    
24.     Component.onCompleted: { //当组件初始化完成时加载图片
    
25.         canvas.loadImage("http://www.baidu.com/img/bdlogo.gif")
    
26.     }
    
27. }

复制代码

运行结果：

发现无法将截取部分绘制出来后，我在代码中添加了一句
console.log(img.width, img.height, img === 0)//【注：这句是我自己后来添加的，以排除问题】
以便确认img是否成功获取，调试结果表明，确实成功获取了（见下图），但就是显示不出来截取的部分。请问这是怎么回事呢？