加载图像并通过画布调整大小会导致无限循环

Question

我想在用<input type='file'>虚拟单击加载它并通过将其绘制到画布上进行压缩后，获得正确缩放的图像。 当在img.onload调用console.log() ，我发现它正在循环运行。 将img.src = canvas.toDataURL("image/png")放在onload之外会生成空白图像，但没有循环。 通过反复试验来移动事物并没有效果，因为我在这里没有发挥作用（即使在重新缩放画布时可以重新绘制图像）。 谢谢！

$('button.picture').on('click',function(){
        var outerWrapper = $(this).closest('.outerWrapper')
        $(this).siblings('.imageLoad').on('change', function(e){
            var loadedImage = e.target.files[0]
            var img = new Image();
            img.src = window.URL.createObjectURL(loadedImage);
            var canvas = document.createElement("canvas");
            canvas.width = outerWrapper.width()
            canvas.height = outerWrapper.height()
            img.onload = function(e){
                //still here the img.width returns the canvas width and not the original image's width
                console.log(img.width)
                var context = canvas.getContext("2d");
                context.drawImage(img,0,0, canvas.width, canvas.height )
                img.src = canvas.toDataURL("image/png")
            }
      $(this).closest('.outerWrapper').children('.imageWrapper').append(img)
        })
    $(this).siblings('.imageLoad').trigger('click')
})

Answer 1

为了回答我自己的问题，我想阐明我的目标是：

1. 通过虚拟点击<input type="file">
2. 保持原始图像的长宽比
3. 压缩它

有效的方法不是img.src = canvas.toDataURL("image/png")调整大小画布时那样设置img.src = canvas.toDataURL("image/png") ，而是通过再次使用URL.createObjectURL(loadedImage)加载原始图像。 为了保持宽高比，我必须创建两个单独的图像，一个用于获取img.naturalWidth和img.naturalHeight进行计算，另一个用于将图像加载到画布上。 很有魅力。 有兴趣学习可以在哪里进行完善。

$('button.picture').on('click',function(){
    var outerWrapper = $(this).closest('.outerWrapper')

    $(this).siblings('.imageLoad').on('change', function(e){

        var loadedImage = e.target.files[0]
        var img = new Image();
        img.src = window.URL.createObjectURL(loadedImage);

        var canvasPic = $('<canvas class="canvasPic"></canvas>')
        canvasPic.prependTo(outerWrapper)

        var canvas = canvasPic[0]
        canvas.width = outerWrapper.width()
        canvas.height = outerWrapper.height()
        var context = canvas.getContext("2d");

        var image = new Image();
        image.onload = function(){
            var w = img.naturalWidth
            var h = img.naturalHeight
            var ratio = h/w
            var newWidth = canvas.height/ratio
            context.drawImage(img,0,0,newWidth,canvas.height)
        }
        image.src = URL.createObjectURL(loadedImage);
    })
    $(this).siblings('.imageLoad').trigger('click')
})