在 html 5 画布上添加背景图像

Posted 2023-05-08

技术标签:

【中文标题】在 html 5 画布上添加背景图像【英文标题】：add background image on html 5 canvas 【发布时间】：2020-11-30 13:40:35 【问题描述】：

我想使用 html 5 画布生成可以共享的图像，但添加图像画布时遇到问题：

这是我的代码：

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

【问题讨论】：

我认为这就是您正在寻找的***.com/questions/6887183/… 如果您需要一些额外的帮助或者这不能解决您的问题，请告诉我。请插入html和css @AxelAldrich 我认为我的问题没有那么复杂，我只想在画布上插入图像源但它不起作用，如果可以的话，请看看我的小提琴演示代码描述. @sergeykuznetsov 改进了代码形成，还添加了 HTML、javascript 和 CSS 代码的漏洞，还插入了包含所有这些代码的小提琴演示。 【参考方案1】：

加载后渲染内容

您正在将内容（文本）渲染到画布，并在加载背景图像之前将该内容添加为图像。

然后背景图像加载事件触发，您在内容上绘制背景图像，但由于您已经显示了画布内容（作为图像），因此永远不会显示背景图像。

始终使用 Image.onload 事件

当您设置 Image.src 属性时，请使用 load 事件来启动涉及该图像的任何形式的渲染。

示例

示例取自您发布的代码并缩减以显示基础知识。背景图像是跨域的，它污染了画布，因此示例将最终输出（作为图像）注释掉。它只是在渲染完成时添加画布而不是图像。

整个渲染过程都在一个函数中，当背景图像加载时调用。

我已经删除了 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 ***.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>

【讨论】：

Thx，这是一个非常好的解释，虽然文档的最终结果是画布而不是图像，但我认为如果图像转换为 base64 并使用 toDataURL() 可以修复方法。【参考方案2】：

我发现将 png 或 jpg 文件转换为 base64 解决了我的问题：

现在可以通过转换为 base64 将画布转换为 png 或 jpg；社交网络图标插件现在将图片识别为图像；

【讨论】：

以上是关于在 html 5 画布上添加背景图像的主要内容，如果未能解决你的问题，请参考以下文章

ps-图像的符合

将图像数据URI（base64）设置为画布背景

如何使用自定义钩子访问织物对象以将背景图像添加到画布？

无法在画布中设置背景图像

向裁剪的画布区域添加背景

背景图