根据图片地址src转base64格式

本地地址转换不需要考虑跨域问题
但图片是网上的链接需要解决浏览器提示的跨域问题
本人解决方法是chrome右键属性打开 目标加–args --disable-web-security --user-data-dir=D:\MyChromeDevUserData
重新打开有提示就设置成功可以进行下一步


具体代码实现如下

<script>
      // 获取要装换的地址
      var img = document.querySelector('img').src
      // 图片地址转base64的方法
      function getBase64Image(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 ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        var dataURL = canvas.toDataURL('image/' + ext)
        return dataURL
      }

      var image = new Image()
      image.src = img
      // console.log(image.src)
      // 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on
      //  'HTMLCanvasElement': Tainted canvases may not be exported
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var base64 = getBase64Image(image)
        console.log(base64)
        let img = document.getElementById('img')
        // base64可以直接当做图片的src去赋值
        img.setAttribute('src', base64)
      }
    </script>