2017-11-25 8 views
0

これまでは作業中のコードがありましたが、画像をbase64に画像として出力しています/ png。代わりにjpgにキャンバスを設定する方法はありますか?jpgイメージをアップロードしてサイズを変更し、image/jpgのmimeでbase64に変換します

私はここにStackOverflowの

にここに複数の投稿から、君たちの助けからの感謝を組み立てたこのコードは、私のコードです:

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
    </style> 
    </head> 
    <body> 
    <input type="file" id="input"/> 
    <br> 
     <canvas id="canvas" width=800 height=600></canvas> 
     <script type="text/javascript"> 
    var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     var cw=canvas.width; 
     var ch=canvas.height; 


     var maxW=320; 
     var maxH=200; 

     var input = document.getElementById('input'); 
     input.addEventListener('change', handleFiles); 

     function handleFiles(e) { 
      var img = new Image; 
     img.onload = function() { 
      var iw=img.width; 
      var ih=img.height; 
      var scale=Math.min((maxW/iw),(maxH/ih)); 
      var iwScaled=iw*scale; 
      var ihScaled=ih*scale; 
      canvas.width=iwScaled; 
      canvas.height=ihScaled; 
      ctx.drawImage(img,0,0,iwScaled,ihScaled); 
      document.getElementById("base").value=canvas.toDataURL(); 
     } 
    img.src = URL.createObjectURL(e.target.files[0]); 
     } 
    </script> 
    <textarea cols="80" rows="50" id="base" name="img"></textarea> 

    </body> 
    </html> 
+0

ええと、JavaやJavaScriptの?あなたの質問は "Java"とタグ付けされていますが、まだJavaScriptコードを表示しています。間違った専門家があなたの質問に行くことを望まないので、タグ付けに注意してください。申し訳ありませんが、 –

+0

私は、Javaの用語については、まったく新しいものです。私はjavaがすべての種類の味で来ると思います。 – drtechno

+0

?いいえ、閉鎖しません。 JavaとJavaScriptはまったく別の言語であり、ハムとハンバーガーのように近いです。 –

答えて

0

だけでなく、私はそれにいくつかのより多くをいじると、これを変更してきましたbase64コードにimage/jpegが表示されます。奇妙なことは、textareaタグをimgタグに変更し、スクリプトの要素idをこの行の "value"から "src"に変更すると、まだpngとして保存しようとしているということです。

"image/jpeg"を追加すると、pngファイルが5K(他のpngと比較して)低くなりましたが、これは正しいですか?それはjpgに保存しようとする必要がありますか?

またはそれは、ブラウザのデフォルトである、と私は何とかimgタグにMIMEタイプを渡す必要が....

関連する問題