Question

手头的任务是将一个.jpg图像（以前上传到图像托管网站）置于1600 x 1600的白色背景中心，并包含一个链接，将生成的图像直接下载到我的电脑上。下面的代码完成了任务。点击下载链接后，将.jpg下载到我的电脑上，并附带必要的规格。但是，当这个新的.jpg图像上传到图像托管网站时，生成的上传文件是一个.png文件。白色背景消失。

一些注意事项：使用绘图打开图像并将其另存为.jpeg文件，并且通知表明任何透明度都将丢失。如果我要继续，则图像将以所需规格保存，并以.jpg格式上传到图像托管网站。我怀疑我已经创建了一个透明背景的图像（不是所需的白色），当删除时，透明画布变成白色。此外，无论我使用的是3p主机，生成的.jpg图像都会更改为.png。

{{1}}

Answer 1

将canvas.toBlob()的type参数设置为"image/jpeg"。

要将<canvas>的背景填充为特定颜色，您可以使用.fillStyle和.fillRect()。

同样ctx.canvas.toBlob()应为canvas.toBlob(); myanchor.addEventListener('click', revokeURL)应为myAnchor.addEventListener('click', revokeURL);传递给this的函数中window为requestAnimationFrame。如果预计下载优惠仅发生一次，则可以删除href和download属性。

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <a id="myAnchor" download="image.jpg"><b><u>Download</u></b></a>

  <img crossOrigin="anonymous" src="http://i1213.photobucket.com/albums/cc475/kmkcorp/TigsMoney1_zpst9wv6cdb.jpg" id="img" style="display:none" alt="picture" />
  <canvas id="canvas" width="1600" height="1600" style="border:0px;"></canvas>

  <script type="text/javascript">
    window.onload = function() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      var img = document.getElementById("img");

      ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);
      canvas.toBlob(function(blob) {
        myAnchor.href = URL.createObjectURL(blob);
      }, "image/jpeg");

      var revokeURL = function() {
        requestAnimationFrame(function() {
          URL.revokeObjectURL(this.href);
          myAnchor.removeAttribute("href");
          myAnchor.removeAttribute("download");
        });
        this.removeEventListener('click', revokeURL);
      };
      myAnchor.addEventListener('click', revokeURL);

      img.src = "http://i1213.photobucket.com/albums/cc475/kmkcorp/TigsMoney1_zpst9wv6cdb.jpg";
    };
  </script>

</body>

</html>

＆＃13;

脚本将.jpg图像保存到磁盘，但图像在上传到3p托管站点时转换为.png

1 个答案: