该图片格式转换涉及到使用 HTML5 的 Canvas 元素和其上下文对象（Context）。当用户选择上传图片后，我们使用 JavaScript 的 FileReader 对象读取用户选择的图片文件，并将其加载到一个新创建的 Image 对象中。当图片加载完成后，我们创建一个新的 Canvas 元素，并获取其 2D 上下文（Context）对象。
接下来，我们将加载的图片绘制到 Canvas 上，这样就可以得到一个与原始图片相同尺寸的 Canvas。然后，我们使用 Canvas 上的 toDataURL() 方法将绘制的内容转换为特定格式的数据 URL。在这个例子中，我们将其转换为 PNG 格式的数据 URL。
Canvas 的 toDataURL() 方法允许我们指定输出的图片格式。我们在这里根据用户选择的格式（PNG、JPG 或 WebP）来动态设置输出的格式。最后，得到的数据 URL 就可以被设置为图片的 src 属性，或者作为下载链接的 href 属性，以便用户下载转换后的图片。
总的来说，这个过程利用了 HTML5 提供的 Canvas 功能，通过在 Canvas 上绘制图片并指定输出格式，实现了图片格式的转换。