测试网络图片地址是否支持跨域（url转base64图片方式）

最新推荐文章于 2024-01-23 16:27:11 发布

小马嘚嘚嘚驾

最新推荐文章于 2024-01-23 16:27:11 发布

阅读量1.3k

点赞数

分类专栏：经验分享文章标签： canvas js

本文链接：https://blog.csdn.net/qq_27667337/article/details/117415335

版权

经验分享专栏收录该内容

16 篇文章 0 订阅

订阅专栏

通过将url转化为base64测试图片是否跨域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text image</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <input placeholder="输入图片路径" id="input" />
  <button onclick="getImgToBase64()" id="button">确定</button>
  <script>
    // let btn = document.getElementById('button')
    // btn.onclick
    function getImgToBase64() { //将图片转换为Base64
      let url = document.getElementById('input').value
      console.log(url, 'url')
      return new Promise((resolve, reject) => {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.src = url
        img.setAttribute('crossOrigin','anonymous')
        img.onload = function(){
          canvas.height = img.height
          canvas.width = img.width
          ctx.drawImage(img,0,0)
          var dataURL = canvas.toDataURL('image/png')
          canvas = null
          resolve(dataURL)
          alert('不跨域')
        }
        img.onerror = (e) => {
          reject(e)
          alert('跨域')
        }
      })
    }
  </script>
</body>
</html>

效果

小马嘚嘚嘚驾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
测试网络图片地址是否支持跨域（url转base64图片方式）

通过将url转化为base64测试图片是否跨域。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫