admin管理员组

文章数量:1405170

I need to create Canvas element with image and need to append to parent for this i have done this

<html>
<head>
    <script>
        window.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext("2d");
        canvas.id = "canvas_id";
        canvas.setAttribute("class" ,"canvas");
        canvas.height =  "400";
        canvas.width =  "800";
        var image = new Image();
        image.src = "http://localhost/tile.png";
        image.onload = function(){
           context.drawImage(image, canvas.width, canvas.height);
        }
        document.body.appendChild(canvas);
    }
</script>
</head>
<body>
</body>
</html>

it give blank canvas

can somebody guide me ?

I need to create Canvas element with image and need to append to parent for this i have done this

<html>
<head>
    <script>
        window.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext("2d");
        canvas.id = "canvas_id";
        canvas.setAttribute("class" ,"canvas");
        canvas.height =  "400";
        canvas.width =  "800";
        var image = new Image();
        image.src = "http://localhost/tile.png";
        image.onload = function(){
           context.drawImage(image, canvas.width, canvas.height);
        }
        document.body.appendChild(canvas);
    }
</script>
</head>
<body>
</body>
</html>

it give blank canvas

can somebody guide me ?

  • javascript
  • jquery
  • canvas
Share edited May 26, 2015 at 19:01 Urvish asked May 26, 2015 at 18:46 UrvishUrvish 1,7764 gold badges16 silver badges23 bronze badges 6
  • So where's the function that gets Base64 data ? – adeneo Commented May 26, 2015 at 18:47
  • are you using canvas.toDataURL('image/jpeg'); to get the data for your canvas / image? – blurfus Commented May 26, 2015 at 18:59
  • no using 'image/png' – Urvish Commented May 26, 2015 at 18:59
  • and tile.png is at the root level? i.e. if you copy paste the image URL to your browser, you can see it right? (sorry for the dumb questions, but just ruling out basics first) – blurfus Commented May 26, 2015 at 19:04
  • yes I can see image for URL – Urvish Commented May 26, 2015 at 19:05
 |  Show 1 more ment

2 Answers 2

Reset to default 4

You are using drawImage() the wrong way. Instead of drawing the image at (0,0) you are drawing it just outside the canvas area as width and height is where position normally goes.

The valid signatures are:

context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Where dx and dy are delta position (relative to origin, normally (0,0) when untranslated). Without width and height specified drawImage() will by default use the image's natural width and height.

The second version allows to override the default size, and the third will allow you to draw from one region to another.

Source

Corrected example:

window.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext("2d");
  canvas.id = "canvas_id";
  canvas.className = "canvas";                  // should be className
  canvas.height = 400;                          // should be numbers
  canvas.width = 800;
  var image = new Image();
  image.onload = function() {
    // or set canvas size = image, here: (this = currently loaded image)
    // canvas.width = this.width;
    // canvas.height = this.height;
    context.drawImage(this, 0, 0);              // draw at (0,0), size = image size

    // or, if you want to fill the canvas independent on image size:
    // context.drawImage(this, 0, 0, canvas.width, canvas.height);
  }
  // set src last (remend to use relative paths where possible)
  image.src = "http://lorempixel./output/fashion-q-c-800-400-7.jpg";
  document.body.appendChild(canvas);
}

That being said, if you only need the image appended there is no need to go via canvas. Just add the image to DOM directly (I assume this is not you want, but just in case..):

var image = new Image();
image.src = "tile.png";
document.body.appendChild(image);

This is my take on it... You need to indicate the coordinates where you want to start drawing (i.e. 0, 0) and - optionally - you can specify how big (wide, height) the canvas is to be.

In my case, I make the canvas to be as big as the image (instead of an arbitrary 400x800) you may need to update that your suit your requirements.

I added some css to show how big the canvas is in relation to the image. You can update/remove that as well depending on your needs.

UPDATED

It uses an hidden image as the source.

I hope this will work for you.

window.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.id = 'canvas_id';
  canvas.setAttribute("class", "canvas");

  var image = new Image();
  image.src = 'http://placekitten./g/200/300';

  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0, image.width, image.height);
  document.body.appendChild(canvas);
}
.canvas {
  border: solid red 1px;
}
<html>

<body>

</body>

</html>

本文标签： javascriptCreate Canvas element with image and append to parentStack Overflow

版权声明：本文标题：javascript - Create Canvas element with image and append to parent - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744882414a2630284.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。