时间戳

首页 > 解决方案 > 在 html 5 画布上添加背景图像

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

问题描述

我想使用 HTML 5 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

标签： javascripthtmljquerycsscanvas

解决方案

加载后渲染内容

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

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

始终使用 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 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>

推荐阅读