如何从富文本压缩和调整图像大小答案

【问题标题】：How to compress and resize image from a Rich Text如何从富文本压缩和调整图像大小
【发布时间】：2015-02-03 17:45:38
【问题描述】：

我正在使用这个插入图像

var readFileIntoDataUrl = function (fileInfo) {
    var loader = $.Deferred(),
        fReader = new FileReader();
    fReader.onload = function (e) {
        loader.resolve(e.target.result);
    };
    fReader.onerror = loader.reject;
    fReader.onprogress = loader.notify;
    fReader.readAsDataURL(fileInfo);
    return loader.promise();
};


$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
        execCommand('insertimage', dataUrl);
}).fail(function (e) {
        options.fileUploadError("file-reader", e);
});

假设我添加了文本Hello World 并添加了图像。现在，当我使用$("#editor").html() 时，它会显示如下内容

这是一个图像+文本的示例来源

Hello World!
img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgA
BAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAARAAAATgAAAAAAAABgAAAA
AQAAAGAAAAABUGFpbnQuTkVUIHYzLjUuOAAA/9sAQwAHBQUGBQQHBgUGCAcHCAoRCwoJCQoVDxAMERgV
[... more base64 data here....]

现在我有两个text+image 所以在服务器端和客户端我都想调整大小和压缩图像

这样就没有人可以插入 > 5MP 的图像，并且还可以在我的数据库中保留带有调整大小图像的富文本

【问题讨论】：

Java 在这里有什么意义？（我还建议仅使用一两行 base64 数据就足以让我们了解您拥有什么......）
在服务器端我得到了这个text+image 那么我将如何使用java处理服务器端的图像压缩？
嗯，您的问题是关于如何在客户端和服务器端执行此操作...我不清楚您要实现的目标。
我已经更新了我的问题，请看一下
我还不清楚。也许其他人会很清楚......

标签： java javascript jquery rich-text-editor richtext

【解决方案1】：

这是在服务器端 (Java) 上执行此操作的方法：

    String imageData = "Hello World! img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoR...";

    //Image data starting point
    int startIndex = imageData.indexOf(";base64,") + ";base64,".length();

    //keep only the image data
    imageData = imageData.substring(startIndex, imageData.length());

    //convert the image data String to a byte[]
    byte[] dta = DatatypeConverter.parseBase64Binary(imageData);
    try (InputStream in = new ByteArrayInputStream(dta);) {
        BufferedImage fullSize = ImageIO.read(in);

        // Create a new image half the size of the original image
        BufferedImage resized = new BufferedImage(fullSize.getWidth() / 2, fullSize.getHeight() / 2, BufferedImage.TYPE_4BYTE_ABGR);
        Graphics2D g2 = (Graphics2D) resized.getGraphics();
        g2.drawImage(fullSize, 0, 0, resized.getWidth(), resized.getHeight(), 0, 0, fullSize.getWidth(), fullSize.getHeight(), null);
        g2.dispose();
    } catch (IOException e) {
        e.printStackTrace();
    }

至于 JavaScript 部分，您可以使用canvas，将画布调整为您想要的尺寸，在其上绘制图像并使用toDataURL 方法将图像转换为String

【讨论】：