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

Question

手头的任务是在 1600 x 1600 的白色背景上将 .jpg 图像（之前上传到图像托管网站）居中，并包含一个 link，它将生成的图像直接下载到我的个人电脑。下面的代码完成了任务。单击下载 link 后，一个具有必要规格的 .jpg 文件会下载到我的电脑上。但是，当这个新的 .jpg 图像上传到图像托管站点时，上传的结果是一个 .png 文件。白色背景消失。

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

<!DOCTYPE html>
<html>
<body>

<left>
<a id="myAnchor" download="image.jpg"><b><u>Download</u></b></a>
</left>

<img crossOrigin="anonymous" src="http://i1213.photobucket.com/albums/cc475/kmkcorp/TigsMoney1_zpst9wv6cdb.jpg" id="img" style="display:none" alt="picture"/></image>

<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");
var img = document.getElementById("img");
ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);
ctx.canvas.toBlob(function(blob){
myAnchor.href = URL.createObjectURL(blob);});
var revokeURL=function(){
requestAnimationFrame(function(){
URL.revokeObjectURL(this.href);
this.href=null;});
this.removeEventListener('click', revokeURL);};
myanchor.addEventListener('click', revokeURL);};
img.src="http://i1213.photobucket.com/albums/cc475/kmkcorp/TigsMoney1_zpst9wv6cdb.jpg";
</script>

</body>
</html>

Answer 1

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

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

另外ctx.canvas.toBlob()应该是canvas.toBlob()； myanchor.addEventListener('click', revokeURL) 应该是 myAnchor.addEventListener('click', revokeURL)；并且 this 是传递给 requestAnimationFrame 的函数中的 window。如果预计只提供一次下载，您可以删除 href 和 download 属性。

<!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>

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

Script saves .jpg image to disk but image converts to .png upon upload to 3p hosting site

javascript

canvas

image

download

drawimage