HTML画布字节数组到java中的图像

Question

实际图像

生成的图像

我在客户端使用 Javascript(SAP/Open-UI-5) 生成了多个图形（最多 14 个）我已将这些图形转换为字节数组，下面是相同的代码

JavaScript 代码

var arrCanvas = document.getElementsByTagName("canvas");

var arrImageByte = [];

for(var i=0; i<arrCanvas.length; i++){

  var canvas = arrCanvas[i];

  if(canvas.width!=0 && (typeof imageNames[i] != 'undefined')){

    var imageDetail = {};

    var uint8Array = canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height).data;

    imageDetail.byteData = [].slice.call(uint8Array);

    imageDetail.name = imageNames[i];

    imageDetail.height = canvas.height;

    imageDetail.width = canvas.width;

    arrImageByte.push(imageDetail);

  }

}

现在我使用 REST API 和 AJAX 调用将这些字节发送到服务器端，并在下面的服务器端创建图像是我重新创建图像的代码

Java代码

int width = imageDetail.getWidth();

int height = imageDetail.getHeight();

byte[] data = imageDetail.getByteData();

String name = imageDetail.getName();

BufferedImage bufferedImage =new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

for (int y = 0; y < height; y++) {

  for (int x = 0; x < width; x++) {

    // calculate array offset

    final int o = (x * 3) + (y * width * 3);

    // set the pixel color here we will need to convert the byte

    // data to an unsigned

    // value using &0xFF before passing it to the Color

    // constructor

    bufferedImage.setRGB(x, y, new Color(data[o + 1] & 0xFF, data[o + 2] & 0xFF, data[o + 3] & 0xFF).getRGB());

  }

}

boolean result = ImageIO.write(bufferedImage, "jpg", new File(baseReportFolderLocation+name+".jpg"));

logger.info("Name "+name+" status :: "+result);

但是我的图像的颜色与预期的不一样。如何重新创建与在客户端创建时颜色完全相同的图像？

我也试过下面的代码

byte[] data = imageDetail.getByteData();

        String name = imageDetail.getName();        

        BufferedImage bImageFromConvert = ImageIO.read(new ByteArrayInputStream(data));

        ImageIO.write(bImageFromConvert, "jpg", new File(baseReportFolderLocation+"New_"+name+".jpg"));

Answer 1

我遵循了您描述的代码（谢谢，因为它帮助我分析了我面临的问题，并且我遵循了类似的方法），在对 Java 代码进行以下更改后，我使图像与原始图像完全相同int width = imageDetail.getWidth();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; int height = imageDetail.getHeight();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; byte[] data = imageDetail.getByteData();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; String name = imageDetail.getName();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BufferedImage bufferedImage =new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (int y = 0; y < height; y++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (int x = 0; x < width; x++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; int o = (x * 4) + (y * width * 4);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bufferedImage.setRGB(x, y, new Color(data[o] & 0xFF, data[o + 1] & 0xFF, data[o + 2] & 0xFF).getRGB());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ImageIO.write(bufferedImage, "jpg", new File(PDFReportingUtil.baseReportFolderLocation+name+".jpg"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } catch (IOException e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; PDFReportingUtil.logger.error("Error while executing the thread "+Thread.currentThread().getName()+" ",e);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }