问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

canvas绘制一张没有后缀名的图片

头像
linkstar
    89548221280

    比方说地址是这个
    http://q1.qlogo.cn/g?b=qq&nk=...

    我想要用drawImage()方法把这个图片画上去，请问怎么实现？js可以把这个转成base64吗？或者能不能转换成有后缀的类似1.jpg这样的格式呢？

    html5cdn服务器
    阅读 3k
    1 个回答
    得票最新
    头像
    haofanya
      509116

      方案一：canvas.toDataURL()
      <!DOCTYPE html>
      <html>
      <head>

      <meta charset="utf-8">
<title>Page Title</title>
<style>
    canavas{
        width: 200px;
        height: 200px;
    }
</style>

      </head>
      <body>
      <div id="box"></div>
      <img id="tulip" src="http://q1.qlogo.cn/g?b=qq&amp;nk=3388643380&s=640">
      <canvas id="myCanvas"></canvas>
      <script >

      var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var dataURL = c.toDataURL();//转base64
console.log(dataURL);

      </script>
      </body>
      </html>

      方案二：FileReader方法
      getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")

      function getBase64(imgUrl) {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
        if (this.status == 200) {
            var blob = this.response;
            console.log("blob", blob)
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
                let base64 = e.target.result;
                console.log(base64)
            };
            oFileReader.readAsDataURL(blob);
        }
    }
    xhr.send();
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题