在html 5画布上添加背景图片加载后呈现内容始终使用Image.onload事件示例

如何解决在html 5画布上添加背景图片加载后呈现内容始终使用Image.onload事件示例

我想使用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);
      //draw a box over the top
      ctx.fillStyle = "rgba(200,0.5)";
      ctx.fillRect(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);   
}

或使用图像源绘制图像：

var img = document.getElementById("image");
    ctx.drawImage(img,0);

这些都不起作用。

注意：在html上使用标签可以解决我插入图片的问题，但不会将其识别为要在社交网络上共享的图片。

这是演示测试链接： FIDDLE DEMO

解决方法

加载后呈现内容

您要在画布上渲染内容（文本），然后在加载背景图像之前将该内容作为图像添加。

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

始终使用Image.onload事件

只要您设置了Image.src属性，就可以使用load事件启动涉及该图像的任何形式的渲染。

示例

示例摘自您发布的代码，并进行了缩减以显示基础知识。背景图像是跨域的，弄脏了画布，因此示例的最终输出（如Image）被注释掉了。渲染完成后，仅添加画布而不是图像。

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

我删除了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);
    ctx.fillStyle = "rgba(200,0.5)";
    ctx.fillRect(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>

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

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

在html 5画布上添加背景图片 加载后呈现内容始终使用Image.onload事件示例

如何解决在html 5画布上添加背景图片 加载后呈现内容始终使用Image.onload事件示例

解决方法

加载后呈现内容

始终使用Image.onload事件

示例

相关推荐

在html 5画布上添加背景图片加载后呈现内容始终使用Image.onload事件示例

如何解决在html 5画布上添加背景图片加载后呈现内容始终使用Image.onload事件示例