HTML5画布加载图像数据的URL

最新推荐文章于 2024-05-13 00:10:41 发布

haozhimei浩海代码

最新推荐文章于 2024-05-13 00:10:41 发布

阅读量2.1k

点赞数

分类专栏： HTML5画布加载图像数据的URL 文章标签： HTML5画布加载图像数据的URL

本文链接：https://blog.csdn.net/sshaozhimei/article/details/18187555

版权

图像数据的URL加载画布,我们可以一个AJAX调用URL获得数据,创建一个图像对象的URL,然后把图像放到画布上drawImage()方法画布的背景。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function loadCanvas(dataURL) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        // load image from data url
        var imageObj = new Image();
        imageObj.onload = function() {
          context.drawImage(this, 0, 0);
        };

        imageObj.src = dataURL;
      }
      
      // make ajax call to get image data url
      var request = new XMLHttpRequest();
      request.open('GET', 'http://www.html5canvastutorials.com/demos/a

最低0.47元/天解锁文章

haozhimei浩海代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布加载图像数据的URL

图像数据的URL加载画布,我们可以一个AJAX调用URL获得数据,创建一个图像对象的URL,然后把图像放到画布上drawImage()方法画布的背景。 body { margin: 0px; padding: 0px; } function loadCanvas(da
复制链接

扫一扫