在 html 5 canvas 上添加背景圖像
[英]add background image on html 5 canvas
問題描述
我想使用 HTML 5 canvas 生成可以共享的圖像，但是添加圖像 canvas 時遇到問題：
這是我的代碼：
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="the_text" style="display: none;width:100%;height:1000px;background-color:red;">
CERTIFICATE OF ATTENDANCE
</div>
<button id="show_img_btn">Search</button>
<div class=" center-screen" id="show_img_here" style="">
</div>
</body>
<script async src="https://static.addtoany.com/menu/page.js"></script>
Javascript：
window.onload = function() {
$("#show_img_btn").on("click", function() {
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 500;
var ctx = canvas.getContext('2d');
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function() {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 800, 500);
};
img1.src = 'http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg';
// rest of content
ctx.fillStyle = '#c3d200';
ctx.font = "45px panton";
var text = $("#the_text").text();
ctx.fillText(text, 10, 120);
ctx.fillStyle = '#000000';
ctx.font = "17px panton";
var text = $("#the_text").text();
ctx.fillText('Lorem ipsum dolor sit amet, consectetur:', 230, 280);
ctx.fillStyle = '#000000';
ctx.font = " bold 31px panton";
var text = $("#the_text").text();
ctx.fillText('Lorem ipsum dolor sit amet, consectetur', 180, 350);
ctx.fillStyle = '#000000';
ctx.font = " bold 31px panton";
var text = $("#the_text").text();
ctx.fillText('Lorem ipsum dolor sit amet, consectetur adipiscing', 80, 400);
// create image
var img = document.createElement("img");
img.src = canvas.toDataURL();
$("#show_img_here").append(img);
//$("body").append(canvas);
});
};
// share icons
var a2a_config = a2a_config || {};
a2a_config.overlays = a2a_config.overlays || [];
a2a_config.overlays.push({
services: ['twitter', 'facebook', 'linkedin', 'email'],
size: '50',
style: 'horizontal',
position: 'top center'
});
CSS：
body {
background: white;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
我也嘗試過類似的方法，但效果不佳。
var background = new Image();
background.src = "http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg";
background.onload = function(){
ctx.drawImage(background,0,0);
}
或使用圖像源繪制圖像：
var img = document.getElementById("image");
ctx.drawImage(img, 0, 0);
這些都不起作用。
注意：在 html 上使用標簽可以解決我插入圖像的問題，但它不會識別為要在社交網絡上共享的圖像。
這是演示測試鏈接： FIDDLE DEMO
2 個解決方案
解決方案1
1 2020-08-11 12:28:01
加載后渲染內容
您正在向 canvas 呈現內容（文本），並在加載背景圖像之前將該內容作為圖像添加。
然后觸發背景圖像加載事件並在內容上繪制背景圖像，但是由於您已經顯示了 canvas 內容（作為圖像），因此永遠不會顯示背景圖像。
始終使用 Image.onload 事件
每當您設置Image.src屬性時，使用 load 事件來啟動涉及該圖像的任何形式的渲染。
例子
示例取自您發布的代碼並縮減以顯示基礎知識。 背景圖像是跨域的，它污染了 canvas，因此示例將最終的 output（作為圖像）注釋掉。 它只是在渲染完成時添加 canvas 而不是圖像。
整個渲染過程在一個 function 中，當背景圖像加載時調用。
我已刪除 jQuery 因為它與問題和解決方案無關。
show_img_btn.addEventListener("click", function() { const canvas = document.createElement("canvas"); canvas.width = 800; canvas.height = 500; const ctx = canvas.getContext('2d'); const bgImg = new Image(); bgImg.src = 'http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg'; bgImg.addEventListener("load", () => drawContent(ctx, bgImg), {once: true}); ctx.fillText("Loading image...", 50, 50); }); function drawContent(ctx, bgImg) { ctx.drawImage(bgImg, 0, 0); ctx.fillStyle = "rgba(200, 0, 0, 0.5)"; ctx.fillRect(0, 0, 800, 500); ctx.textAlign = "center"; ctx.fillStyle = '#c3d200'; ctx.font = "45px panton"; ctx.fillText(the_text.textContent, ctx.canvas.width / 2, 120); /* Tainted canvas can not get pixel data on cross origin image (from cdn.playbuzz.com to stackoverflow.com) var img = document.createElement("img"); img.src = ctx.canvas.toDataURL(); img.addEventListener("load", () => { show_img_here.appendChild(img); }, {once: true}); */ show_img_here.appendChild(ctx.canvas); };
body { background: white; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; }
<div id="the_text" style="display: none;width:100%;height:1000px;background-color:red;">CERTIFICATE OF ATTENDANCE</div> <button id="show_img_btn">Load & create image</button> <div class=" center-screen" id="show_img_here" style=""></div>
解決方案2
-1 2020-08-11 14:04:57
我發現將 png 或 jpg 文件轉換為 base64 解決了我的問題：
- 通過轉換為 base64 現在可以將 canvas 轉換為 png 或 jpg；
- 社交網絡圖標插件現在將圖片識別為圖像；
如何在HTML5畫布中添加背景圖像數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.