使用图像而不是画布

Using Image instead of Canvas

本文关键字：图像      更新时间：2023-09-26

我有一个图像，我想在上面画一些正方形。但是我一直在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>

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

查看此代码笔以获取工作示例。

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

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

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

相关文章：