html上传图片，图片过大时怎么缩小显示

Question

将上传的图片放到画布上，进行旋转等一系列操作。因为图片过大，性能较低，调整了一下显示图片大小，问题为，图片在页面显示是缩放的图，但是旋转时，旋转的是画布，只显示图片的一部分。这种情况应该怎么处理？需要旋转时也显示全部图，而不是一部分。

obi.prototype.extractImageData = function() {
    var img = this.image;
    //createElement() 方法通过指定名称创建一个元素
    drawArea = document.createElement('canvas');
    ctx = drawArea.getContext("2d");
    if (img.width <= 600 && img.height <= 600) {
                    drawArea.width = img.width;
                    drawArea.height = img.height;
            } {
                    if (img.width > 600) {
                            img.height *= 600 / img.width;
                            img.width = 600;
                    } else {
                            if (img.height > 600) {
                                    img.width *= 600 / img.width;
                                    img.height = 600;
                            }
                    }
    
            }
        drawArea.width = img.width;
        drawArea.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    // 通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 
    // 将图像数据放回画布：
    this.imageData = ctx.getImageData(0, 0, img.width, img.height);
    return this.imageData;

Answer 1

生成缩略图后再处理