如何扩展画布图像'；在javascript中转换为文件对象？

我需要上传一个png/jpeg图像文件（图像a），如图所示，从浏览器中任意大小，然后将其导出为不同大小的新图像（图像b）。正如你所看到的，我想保持图像a的比例，并用纯色（如白色）填充缺少的部分。如何使用javascript实现这一点

---

编辑：对不起，这个问题不好。我已经编辑了我的问题，添加了我自己的代码来解决这个问题。我的工作是使用画布绘制白色背景，然后绘制上传的图像，只要它适合画布。然后我使用Reimg.js捕获画布并下载它

然而，问题是如果我想使用拍摄的图像，我必须再次上传它。下面的代码不是我想要的

那么，有没有更好的方法来上传图像文件，像下面的代码一样处理它，然后检索文件数据（文件对象），而无需再次捕获和上传该图像

//reimg.js
window.ReImg={
输出处理器：函数（encodedData、svgElement）{
var isPng=函数（）{
返回encodedData.indexOf（'data:image/png'）==0；
};
var downloadImage=函数（数据，文件名）{
var a=document.createElement（'a'）；
a、 href=数据；
a、 下载=文件名；
文件.正文.附件（a）；
a、 单击（）；
};
返回{
toBase64:函数（）{
返回编码数据；
},
toImg:function（）{
var imgElement=document.createElement（'img'）；
imgElement.src=encodedData；
回报激励；
},
toCanvas：函数（回调）{
var canvas=document.createElement（'canvas'）；
var boundedRect=svgElement.getBoundingClientRect（）；
canvas.width=boundedRect.width；
canvas.height=boundedRect.height；
var canvasCtx=canvas.getContext（'2d'）；
var img=this.toImg（）；
img.onload=函数（）{
canvasCtx.drawImage（img，0,0）；
回调（画布）；
};
},
toPng:function（）{
if（isPng（））{
var img=document.createElement（'img'）；
img.src=encodedData；
返回img；
}
this.toCanvas（函数（画布）{
var img=document.createElement（'img'）；
img.src=canvas.toDataURL（）；
返回img；
});
},
toJpeg:函数（质量）{//质量应介于0-1之间
质量=质量| | 1.0；
（功能（q）{
this.toCanvas（函数（画布）{
var img=document.createElement（'img'）；
img.src=canvas.toDataURL（'image/jpeg'，q）；
返回img；
});
})（质量）；
},
下载PNG:函数（文件名）{
filename=filename | |“image.png”；
if（isPng（））{
//它已经是画布了
下载图像（encodedData，文件名）；
返回；
}
//先转换到画布
this.toCanvas（函数（画布）{
下载图像（canvas.toDataURL（），文件名）；
});
}
};
},
fromSvg:function（svgElement）{
var svgString=new XMLSerializer（）.serializeToString（svgElement）；
返回新的this.OutputProcessor（'数据：image/svg+xml；base64，'+window.btoa（svgString），svgElement）；
},
fromCanvas:function（canvasElement）{
var dataUrl=canvassement.toDataURL（）；
返回新的this.OutputProcessor（dataUrl）；
}
};
//script.js
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
$（'#uploadImage'）。在（'change'，函数（事件）上{
var img=新图像（）；
var reader=new FileReader（）；
reader.onload=函数（e）{
img.src=e.target.result；
};
reader.readAsDataURL（event.target.files[0]）；
img.onload=函数（）{
//绘制白色背景
context.beginPath（）；
rect（0,0500500）；
context.fillStyle=“白色”；
context.fill（）；
//绘制上传的图像
var scale=Math.min（（canvas.width/img.width），（canvas.height/img.height））；
上下文.drawImage（img，0，0，img.width，img.height，（canvas.width-img.width*scale）/2，（canvas.height-img.height*scale）/2，img.width*scale，img.height*scale）；
};
});
$（'btnCapture'）。在（'click'，function（）上{
ReImg.fromCanvas（canvas.downloadPng（）；
});
#画布{
边框：1px实心海绿；
}

调整图像大小
俘获
我找到了答案。这可以通过将画布转换为dataURI然后将dataURI转换为文件来简单地解决。画布到dataURI的转换可以按照下面的代码片段完成。
然后


var imgB64=canvas.toDataURL（'image/png'）您需要提供您已经尝试过的代码，并解释它的错误。然后我们可以帮助您解决问题。这不是一个“为我编写代码”的网站。很抱歉这个问题不好。我已经更新了。你想对图像做什么？您已经有了对它的引用，作为您创建的下载链接的href属性。如果你在页面中放置一个图像，并将src设置为相同的值，那么你就会得到这个图像。我已经找到了我想要问的问题。这就是如何在javascript中将画布元素转换为文件对象。幸运的是，我找到了答案。我很快会补充答案。谢谢你的帮助。