使用图像而不是画布

Question

I have a Image and I want to paint on top of it some square. But I keep getting undefined function on getContext('2d') . I must add that the var img is an image which is already loaded on the page, I'm trying to interpret it as a canvas since I am using another script which lets to select areas on the image and if I use a canvas the script will not work. So in the case where I can not interpret a image as a canvas what would you suggest?

Js function

function drawInput(dx1,dy1,dx2,dy2) {
    var img = document.getElementById('home:tempImg');

    var canvas = img;
    console.log(canvas);
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.onload = function() {
      context.drawImage(imageObj, dx1, dy1,dx2-dx1,dy2-dy1);
    };
    imageObj.src = 'images/selected.png';
}

HTML

<h:body>


    <h:form onsubmit="#{getComponents.getAllComponents()}" id="home">

        <div>

            <p:graphicImage id="tempImg" rendered="true" value="#{imageView.selectedImg}">
            </p:graphicImage>

        </div>
</h:form>
</h:body>
    <script type="text/javascript">
        var myJSONStr ='{ "area" : #{areaInputView.areaListString}}';

        console.log(myJSONStr);


        var json = JSON.parse(myJSONStr);
        //console.log(json.area[1].x1);
        for(var i=0;myJSONStr.length >i ; i++) {
            console.log(json.area[i].x1, json.area[i].y1, json.area[i].x2, json.area[i].y2);
            drawInput(json.area[i].x1, json.area[i].y1, json.area[i].x2, json.area[i].y2);
        };
    </script>
</html>

Answer 1

By leveraging custom JS 'classes' (of the type app.Image in this case), we can build a pretty neat wrapper that allows us to draw images dynamically based on other instances we have kept track of.

Check out this Codepen for a working example.

window.app = window.app || {};
app.Canvas = document.getElementById('myCanvas').getContext('2d');
app.Image = function(source, x, y) {
  this.x = x;
  this.y = y;
  this.data = new Image();
  this.data.addEventListener('load', this.draw.bind(this));
  this.data.src = source;
};

app.Image.prototype.draw = function() {
    app.Canvas.drawImage(this.data, this.x, this.y);
};

app.Image.prototype.getImageBounds = function() {
    return {
      height: this.data.height,
      width: this.data.width
    }
};

var myImage = new app.Image('http://placehold.it/250x250', 10, 10);
var mySecondImage = new app.Image('http://placesheen.com/100/100', myImage.x + 10, myImage.y + 10);

The most important line is the last one. Notice how we're initializing a new app.Image with x and y coordinates relative to the first image. By using a custom wrapper class that keeps track of this information, we're able to easily access the necessary data that we need in a variety of circumstances.

I hope this helps to get you on the right track! Let me know if you have any questions about the code, and I'll be glad to explain.