使用javascript调整图像大小创建空白画布图像

我正在使用javascript和画布调整图像的大小，但是一些调整大小的图像是黑色背景

代码如下：

函数resizeImage（输入、maxWidth、maxHeight、回调）{
var数据；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
var oc=document.createElement（'canvas'），octx=oc.getContext（'2d'）；
oc.width=img.width；
oc.height=img.height；
octx.drawImage（img，0,0）；
oc.width=最大宽度；
oc.height=最大高度；
如果（img.width>maxWidth）{
octx.drawImage（oc，0，0，oc.宽度，oc.高度）；
octx.drawImage（img，0，0，oc.宽度，oc.高度）；
数据=oc.toDataURL（“图像/jpeg”，0.7）；
}否则{
数据=oc.toDataURL（“图像/jpeg”，0.7）；
}
回调（数据）；
};
img.src=event.target.result；
};
reader.readAsDataURL（input.files[0]）；
}
}
函数运行（）{
调整图像大小(
document.getElementById（'image'），
600, 600, 
函数（dat）{
document.getElementById（'preview'）.src=dat；
}
)
}

调整大小
使用此图像上载-查看错误

它可以创建空白图像，对某些图像效果良好

为什么要设置

oc.width

/

oc.height

两次，中间有绘图指令？（更改画布尺寸将清除画布，因此一旦调整了画布尺寸，通常不想触摸这些尺寸，除非您想硬清除画布）

相反，请加载图像，然后在其onload处理程序中执行以下操作：

首先检查要使用的尺寸（img宽度/高度或基于maxw/maxh缩小），然后

创建画布，设置其宽度/高度，然后获取二维上下文。然后

使用

ctx.drawImage（0,0，cvs.width，cvs.height）

，这将在必要时自动调整大小，最后

获取（可能已调整大小）图像作为数据url

---

下面的代码将完成您的任务。请记住，如果原始图像比例太大，则不尊重原始图像比例。它只会将其挤压到600x600的盒子中

function resizeImage(input, maxWidth, maxHeight, callback) {
    var data;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var oc = document.createElement('canvas'), octx = oc.getContext('2d');

                if (img.width > maxWidth || img.height > maxHeight) {
                    // Image is too big -> resize
                    oc.width = maxWidth;
                    oc.height = maxHeight;
                } else {
                    // Image will fit - use original sizes
                    oc.width = img.width;
                    oc.height = img.height;
                }

                octx.drawImage(img, 0, 0, oc.width, oc.height);
                data = oc.toDataURL("image/jpeg", 0.7);

                callback(data);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}

---

我可以（），尽管这感觉有点像你让我为你做你的工作，因为这应该已经足够让你更新你的代码了。至少，这足以让你尝试更新你的代码，注释是“我尝试了这个，但我无法让它工作”=）你是对的，我应该用我之前尝试你的方法时收到的错误更新代码-如果这很重要，我尝试了，得到了类似这样的东西（），我试图挖掘更多，但却找不到故障。你上面的代码很有用，我会深入研究它来解决我的问题。非常感谢您在指导正确方法方面给予的巨大帮助。这个帮助对帮助我找到正确的解决方案非常重要。谢谢