qq_21351335 2022-04-25 17:22 采纳率: 66.7%
浏览 75
已结题

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

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

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;

img

img

  • 写回答

1条回答 默认 最新

  • 黑白码农 2022-04-25 17:37
    关注

    生成缩略图后再处理

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 5月31日
  • 已采纳回答 5月23日
  • 创建了问题 4月25日

悬赏问题

  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥15 统计大规模图中的完全子图问题
  • ¥15 使用LM2596制作降压电路,一个能运行,一个不能
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路
  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题