Блог

Когда я щелкаю правой кнопкой мыши по изображению, которое было добавлено в <canvas> тег, единственным типом файла, который можно сохранить как, является .png . Даже если загруженный файл имеет формат .jpeg, единственным вариантом, отображаемым в меню сокращений к Save Image As , является файл .png. Данные изображения отображаются в <canvas> теге в виде файла png?

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 Загружает изображение и рисует на Canvas в новом размере

Собственный формат содержимого html5 canvas — это растровое изображение.

На самом деле это лучше всего описать как пиксельную карту, но думайте об этом как о растровом изображении.

Вы не можете щелкнуть правой кнопкой мыши-сохранить-как элемент canvas, но вы можете:

• получите растровое изображение canvas в виде файла данных png с помощью .toDataURL().

• получите растровое изображение canvas в виде файла данных jpg с помощью .toDataURL(‘изображение /jpeg’).

• получите / задайте данные растрового изображения в пикселях с помощью context.getImageData.