Использование изображения вместо холста

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 координатами Относительно до первого изображения. Используя специальный класс-оболочку, который отслеживает эту информацию, мы можем легко получить необходимые данные, которые нам нужны в самых разных обстоятельствах.

Я надеюсь, что это поможет вам на правильном пути! Дайте мне знать, если у вас есть какие-либо вопросы по поводу кода, и я буду рад объяснить.