Raw 图像转png

 

 

问题解决  源于：

https://stackoverflow.com/questions/6413744/looking-to-access-16-bit-image-data-in-javascript-webgl

 

 

当前时封装了一个组件

专门用于原始图像转png 图像

全局引入 pngtoy库  然后直接在组件中使用

浏览器不支持显示16bit的原始图像

需要用到pngtoy 这个库  链接：https://github.com/xgds/pngtoy

组件代码 

rawtopng.vue

<template>
  <div>
    <canvas style="display:none" id="c"></canvas>
    <img class="image_smail" :src="image_canvas" alt />
  </div>
</template>

<script>
export default {
  props: ["image_src"],
  data() {
    return {
      drawerVisible: false,
      image_canvas: "ccccc",
    };
  },
  components: {},
  mounted() {
    var dataObj;
    let image_src = this.image_src;
    let image_canvas = '';
    let c = document.getElementById("c");
    let ctx = c.getContext("2d");
    let imgCanvace = new Image();
    var img = new PngImage();
    imgCanvace.crossOrigin = "Anonymous";
    img.crossOrigin = "Anonymous";
    var buffer;
    let maxG = 0;
    let bufferold = [];
    img.onload = function () {
      var pngtoy = this.pngtoy;
      dataObj = pngtoy.decode().then(function (results) {
        c.width = results.width;
        c.height = results.height;
        console.log("image---", c);
        buffer = new Uint16Array(results.bitmap);

        if (results.depth > 8) {
          for (var i = 0, j; i < buffer.length; i++) {
            j = buffer[i];
            buffer[i] = ((j & 0xff) << 8) | ((j & 0xff00) >> 8);
            maxG = Math.max(maxG, buffer[i]);
          }
          for (var i = 0; i < buffer.length; i++) {
            buffer[i] = (buffer[i] / maxG) * 255;
          }
        }
        imgCanvace.src = image_src;
      });
    };
    img.src = image_src;
    img.onerror = function (e) {};

      let that=this
    imgCanvace.onload = function () {
      ctx.drawImage(imgCanvace, 0, 0);
      let pixels = ctx.getImageData(0, 0, c.width, c.height);
      let pixold = ctx.getImageData(0, 0, c.width, c.height);
      for (var i = 0, j = 0; i < pixels.data.length; j++, i += 4) {
        pixels.data[i] = buffer[j];
        pixels.data[i + 1] = buffer[j];
        pixels.data[i + 2] = buffer[j];
      }
      ctx.putImageData(pixels, 0, 0);
      //异步执行
      //将画布上已经置灰的图变成图片链接
      setTimeout(function () {
       image_canvas = c.toDataURL("image/png");
      that.image_canvas=image_canvas
      }, 500);
    };
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
.image_smail{
  width: 450px;
}
</style>