Overlay HTML5 canvas over image

Question

Tôi muốn có một hình ảnh được tải lên từ cơ sở dữ liệu của tôi và trên cùng nó có cùng kích thước ở cùng một vị trí là canvas HTML5.

Hầu hết các giải pháp tôi đã sử dụng JQuery/JavaScript, tuy nhiên tôi muốn có giải pháp tương tự nếu có thể chỉ sử dụng CSS3 khi hình ảnh được xuất từ ​​cơ sở dữ liệu và có thể có nhiều hình ảnh trên trang và mỗi hình ảnh sẽ có canvas.

Tôi làm cách nào để đạt được điều này?

Answer 1

Có.

Bạn có thể làm điều này hoàn toàn bằng CSS, nhưng bạn sẽ phải thêm một số đường ống dẫn HTML cụ thể cho mỗi hình ảnh.

Nếu bạn cảm thấy mệt mỏi với hệ thống ống nước phụ, javascript có thể thực hiện hầu hết hệ thống ống nước cho bạn.

Đây là một Fiddle của phiên bản CSS-chỉ:

http://jsfiddle.net/m1erickson/g3sTL/

HTML:

<div class="outsideWrapper"> 
    <div class="insideWrapper"> 
     <img src="house-icon.jpg" class="coveredImage"> 
     <canvas class="coveringCanvas"></canvas> 
    </div> 
</div> 

Tất nhiên, trong phiên bản của bạn, bạn sẽ thay thế src hình ảnh với năng động của bạn gọi cơ sở dữ liệu để tìm nạp hình ảnh.

CSS:

.outsideWrapper{ 
    width:256px; height:256px; 
    margin:20px 60px; 
    border:1px solid blue;} 
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;} 
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
} 
.coveringCanvas{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
    background-color: rgba(255,0,0,.1); 
} 

Answer 2

Possible duplicate.

Tùy thuộc vào số lượng hình ảnh trong cơ sở dữ liệu, bạn có thể có id khung hình riêng cho mỗi tên có tệp hình ảnh (ví dụ: canvas #foo { background:url(foo.jpg) }). Tôi sẽ tải nó trong một bản định kiểu riêng biệt. :)

Có lẽ sẽ dễ dàng hơn để duy trì giải pháp Javascript mặc dù cơ sở dữ liệu của bạn là động. Một vài dòng javascript sẽ là đủ, thay vì liên tục cập nhật biểu định kiểu có tên mới. Ít hơn lỗi dễ bị lỗi đánh máy là tốt.