Question

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

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

的值

谢谢！

Answer 1

tl;博士：不要打扰

这可能在理论上是可行的，但我会非常强烈地反对它。可以创建一个javascript Img元素，该元素引用用户输入的URL。然后，您可以在HTML5画布中绘制此图像。

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

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

Answer 2

没有。不可能。 javascript无法操纵二进制内容

Answer 3

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

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

最好和最可靠的选择是在您可用和熟悉的任何技术中执行转换服务器端（如果您熟悉Java，则使用Apache Batik）。

Answer 4

只是不可能。

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

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

Answer 5

这是可能的，但不推荐。

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

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

获得文件后，我喜欢使用megapix：megapixel library

进行渲染

像这样监听图像onload事件：

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上传。然后将服务器端转换为（如有必要）将某些内容发送回他们可以查看的用户。

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

Answer 6

您可以使用jimp-browser（可能使用WebWorkers）。

https://github.com/oliver-moran/jimp/tree/master/browser

此库不依赖于canvas的toDataUrl方法，因此例如也可以在iOS中使用更大的图像（请参阅此处http://caniuse.com/#search=toDataURL中的“已知问题”）。

Answer 7

您可以使用Web assembly ImageMagick转换图像客户端。在大多数现代的网络浏览器中，WebAssembly都是supported。

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

7 个答案: