スクリプトは.jpgイメージをディスクに保存しますが、3pのホストサイトにアップロードするとイメージは.pngに変換されます

1600 x 1600の白い背景に.jpgイメージ（以前はイメージホスティングサイトにアップロード済み）その結果の画像を自分のPCに直接ダウンロードするリンクが含まれています。以下のコードは、このタスクを実行します。ダウンロードリンクをクリックすると、.jpgが必要な仕様でPCにダウンロードされます。ただし、この新しい.jpg画像が画像ホスティングサイトにアップロードされると、結果のアップロードは.pngファイルになります。白い背景が消えます。スクリプトは.jpgイメージをディスクに保存しますが、3pのホストサイトにアップロードするとイメージは.pngに変換されます

注：画像をペイントして開いて.jpegファイルとして保存すると、透明度が失われることが通知されます。処理を続行する場合、画像は希望の仕様で保存され、画像ホスティングサイトに.jpgとしてアップロードされます。透明な背景（必要に応じて白色ではない）を作成したと思われます。透明なキャンバスは白くなります。さらに、結果として得られる.jpg画像は、私が使用する3pホストに関係なく.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>

出典

2017-11-04 K.Corp

人々は1つの巨大な段落を読み、質問と簡潔であることを目指して持っていないので、適切に質問をフォーマットしてください！ –

canvas.toBlob()"image/jpeg"へのtype引数を設定します。

<canvas>の背景を特定の色に塗りつぶすには、.fillStyleと.fillRect()を使用できます。

ctx.canvas.toBlob()はcanvas.toBlob()である必要があります。 myanchor.addEventListener('click', revokeURL)はmyAnchor.addEventListener('click', revokeURL)である必要があります。 thisは、に渡される機能内でwindowです。ダウンロードのオファーが1回発生すると予想される場合は、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>

出典

2017-11-04 19:57:52 guest271314

@ K.Corp Answerでstacksnippetsでコードを試しましたか？ – guest271314

これは完全に動作し、多くの時間、多くのおかげで私に多くの時間を節約しました！ 1つの小さな問題です...ダウンロードリンクはページの左下にあります...どうすれば左上に移動できますか？ –

@ K.Corp CSSを使ってみましたか？ – guest271314

スクリプトは.jpgイメージをディスクに保存しますが、3pのホストサイトにアップロードするとイメージは.pngに変換されます

答えて

関連する問題