js转url为base64

141 阅读1分钟

html

<img src="" crossorigin="anonymous" style="width:100px;height: 100px;" class="imgs">
<canvas id="myCanvas"></canvas>

js

function drawBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png");
      return dataURL;
    }
    function getBase64Image(url, ref) {
      var image = new Image();
      image.src = url + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = function () {
        var base64 = drawBase64Image(image);
        ref.src = base64;
      };
    }
    getBase64Image('https://timetraveller.jydata.com/customer/image/20220120/2f20e449da884aa784c11ea5d3ee369d.jpeg',document.querySelector('.imgs'));