在客户端（javascript）将图像从html转换为jpg

我有一个html表单，用户在其中插入图像（输入）。我的用户可能不是高级用户，因此他们可能希望插入许多不同类型的图像格式。但是，我只希望用户发送jpg/gif/png文件。一个选项是阻止其他文件类型，但是，我想知道是否可以在客户端转换文件（我不想发送一个非常大的文件，然后在服务器上转换）。因此，我能想到的唯一方法就是使用JavaScript

那么，有人知道如何在javascript中进行图像格式转换吗？并将此图像结果作为html:input的值

---

谢谢

不可能。javascript无法操作二进制内容，这是不可能的

没有客户端Javascript支持进行图像处理

---

您可以使用市场上最流行的web浏览器（如Internet Explorer、Firefox、Safari、Chrome或Opera）的扩展性API，但这不是一个基于Javascript的标准解决方案。无论如何，这将是一个客户端解决方案，其中一些API支持文档操作，因此，也许您可以使用特定的CSS类处理某些HTML元素中的某种点击。

您可以使用Java小程序（类似于Facebook照片上传小程序在上传之前预准备/调整图像大小的方式），你没有太多其他选择

从本质上讲，在客户端执行转换将非常困难，但这是可能的（使用浏览器插件）。仅仅依靠JavaScript是不可能的。即使是这样，也会很危险，因为不同浏览器的实现各不相同。其他解决方案不会是零占用（用户必须在其计算机上安装依赖项）

最好、最可靠的选择是使用任何可用且熟悉的技术在服务器端执行转换（如果您熟悉Java，请使用Apache Batik）；医生：不用麻烦了

这在理论上是可能的，但我强烈反对。可以创建一个javascript

Img

元素，该元素引用用户键入的URL。然后可以在HTML5画布中绘制此图像

然后，您可以手动访问画布上的数据，并将图像分析/转换为适当的格式。然后可以将此Base64或URL编码发送到服务器，然后服务器可以将图像返回到客户端

---

这当然是完全疯狂的，不应该尝试。此解决方案需要在javascript中实现JPG压缩，虽然在技术上可行，但由于浏览器限制（例如速度）可能不可行。

这是可能的，但不推荐使用

对于初学者，如果图像来自移动设备，则需要获取exif数据以正确旋转图像。然后需要验证文件类型，并将其转换为可以通过ajax上传的内容。为此，您需要一个能够处理画布对象上的“toDataURL”的浏览器：

function supportsToDataURL() {
    var c = document.createElement("canvas");
    var data = c.toDataURL("image/jpeg");
    return (data.indexOf("data:image/jpeg") == 0)        
}

获得文件后，我喜欢使用megapix渲染它：

侦听图像加载事件，如下所示：

var img = new Image()
img.onload = function() {
    // do some stuff like rendering image to a canvas
}
var mpImg = new MegaPixImage(file);
mpImg.render(img, { quality: 1, maxWidth: 1024 });  

然后，您可以将图像写入画布：

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = sourceWidth;
canvas.height = sourceHeight;

ctx.drawImage(img, 0, 0, sourceWidth, sourceHeight);
var url = canvas.toDataURL();
// or if you want a specific file type
var jpeg = canvas.toDataURL("image/jpeg");
var png = canvas.toDataURL("image/png");

注意：android的某些版本可能支持“toDataURL”，但不支持完整规范。它们可能只渲染PNG等。这只是在图像渲染中尝试获得跨浏览器兼容性时遇到的众多问题之一

相信我，我已经花了大约16个小时为一个移动网络应用制作了一个图像裁剪和调整工具，这可不是一件容易的事

更好的解决方案是让用户选择一个文件，将其转换为base64并通过ajax上传。然后在服务器端转换内容，并（如有必要）将内容发送回他们可以查看的用户

---

我正在开发一个允许上传移动图像的插件，完成后我会将链接放在这里。

您可以使用jimp浏览器（可能与WebWorkers一起使用）

---

此库不依赖canvas的toDataUrl方法，因此也适用于iOS中的较大图像（请参阅此处的“已知问题”）。

您可以在客户端转换图像。WebAssembly是最现代的web浏览器。

如果不可能，也许可以使用HTML5？不，HTML5没有添加这种功能。我同意。这可能是目前唯一的方法，但肯定不是最简单、最快的方法。如果文件不能通过URL/在线访问（如果他们正在上传），这是不可能实现的，因此，它仍然会产生一个服务器端解决方案。@Mikaveli，我必须承认，在提出这个答案时，我并没有真正考虑到可实现性。