HTML Canvas标签的内容是否自动创建为PNG文件？

Question

当我右键单击绘制到<canvas>标记中的图像时，将另存为的唯一文件选项类型是.png 。 即使上传的文件是.jpeg，快捷菜单中显示的Save Image As为的唯一选项也是.png文件。 图像数据是否作为png文件绘制到<canvas>标记中？

HTML

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266"></canvas>

脚本

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

    var cnvs=document.getElementById("cnvsForFormat");
    console.log("cnvs: " + cnvs);
    var ctx=cnvs.getContext("2d");
    cnvs.style.border="1px solid #c3c3c3";

    var img = new Image;

    img.src = URL.createObjectURL(frmData);

    img.onload = function() {
      var picWidth = this.width;
      var picHeight = this.height;
      var wdthHghtRatio = picHeight/picWidth;

      console.log('picWidth: ' + Number(picWidth));
      console.log('picHeight: ' + Number(picHeight));
      console.log('wdthHghtRatio: ' + wdthHghtRatio);

      if (Number(picWidth) > 400) {
        var newHeight = Math.round(Number(400) * wdthHghtRatio);
      } else {
        return false;
      };

      document.getElementById('cnvsForFormat').height = newHeight;
      console.log('width: ' + picWidth + " h: " + picHeight);
      console.log('width: 400  h: ' + newHeight);
      //Must change the width and height settings in order to decrease the image size, but
        //it needs to be proportional to the original dimensions.
        ctx.drawImage(img,0,0, 400, newHeight);
    };

jsFiddle上传图片并以新尺寸绘制到画布上

Answer 1

html5 canvas内容的本机格式是位图。

实际上，最好将其描述为像素图，但可以将其视为位图。

您不能右键单击另存为画布元素，但是可以：

• 使用.toDataURL（）将画布位图作为png dataURL获取。

• 使用.toDataURL（'image / jpeg'）将画布位图获取为jpg dataURL。

• 使用context.getImageData获取/设置位图像素数据。