Question

我有一张图片，我想在它上方画一些正方形。但我继续在getContext('2d')上获得未定义的功能。我必须补充一点，var img是一个已经加载到页面上的图像，我试图把它解释为画布，因为我正在使用另一个脚本，它允许选择图像上的区域，如果我使用画布该脚本不起作用。那么在我无法将图像解释为画布的情况下，您会建议什么？

Js功能

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

通过利用自定义JS'类'（在这种情况下类型为app.Image），我们可以构建一个非常整洁的包装器，允许我们根据我们跟踪的其他实例动态绘制图像。

查看 this Codepen 以获取有效工作示例。

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);

最重要的一行是最后一行。请注意我们如何将app.Image和x坐标相对的新y初始化为第一张图片。通过使用跟踪此信息的自定义包装类，我们能够轻松访问在各种情况下所需的必要数据。

我希望这有助于让您走上正轨！如果您对代码有任何疑问，请告诉我，我很乐意解释。

使用Image而不是Canvas

1 个答案: