如何将图片转换为base64编码 - JavaScript代码示例 - 常规

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
    <title>WebCat</title>
  </head>
  <body>    
    <img src='https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_6.jpg' width='100%' id='hop'/>
    <script>
      var imageUrl = 'https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg';
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        var dataURL = canvas.toDataURL('image/jpeg');
        document.getElementById('hop').src = dataURL;
      };
      img.src = imageUrl;
    </script>
  </body>
</html>
要将图片转换为base64编码，您可以使用JavaScript的FileReader对象进行操作。以下是一个示例代码：
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset='utf-8' name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'&gt;
    &lt;title&gt;WebCat&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;    
    &lt;img src='https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_6.jpg' width='100%' id='hop'/&gt;
    &lt;script&gt;
      var imageUrl = 'https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg';
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        var dataURL = canvas.toDataURL('image/jpeg');
        document.getElementById('hop').src = dataURL;
      };
      img.src = imageUrl;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>此代码将会加载指定的图片，并将其转换为base64编码。最终，将base64编码的图片显示在页面上的<code>&lt;img&gt;</code>标签中。请注意，由于涉及跨域访问，需要将<code>crossOrigin</code>属性设置为<code>'Anonymous'</code>。</p>