Question

我一直在努力做到这一点，到目前为止我有一个工作代码，但它将图像作为image / png输出到base64。有没有办法将画布设置为jpg？

这段代码我是在多个帖子中汇编而成，感谢你们在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>

Answer 1

好吧我已经更多地摆弄它了，并且更改这个让我的image / jpeg显示在base64代码中。奇怪的是，当我将textarea标签更改为img标签并且还更改脚本中的元素id时，它仍然会尝试保存为png。＆＃34; value＆＃34;到＆＃34; src＆＃34;在这一行：

 document.getElementById("base").value=canvas.toDataURL("image/jpeg");

添加＆＃34; image / jpeg＆＃34;将png文件降低了5K（与其他png相比），但这是正确的吗？它应该尝试保存到jpg吗？

或者它是浏览器中的默认值，我必须以某种方式将mime类型传递给img标记....

上传jpg图像，调整大小，然后使用mime of image / jpg将其转换为base64

1 个答案: