javascript - 如何在 Canvas 上实现条形码

Question

我需要一些帮助来在我的 Canvas 中实现条形码。

我正在使用 ean13.js 生成条形码，如果将其添加到 div (#controlDiv)，它会像魅力一样工作。

但是我有一个 Canvas ，我想在其中添加这个“div”。

我的 HTML

<div>
   <div>
      <input type="button" id="btnGenerateStuffInCanvas" value="Add Stuff"/>
      <input type="button" id="btnGenerateEAN13" value="Generate EAN"/>
   </div>
   <div id="controlDiv">
   </div>
   <canvas id="myCanvas"></canvas>
</div>

Answer 1

试试这个。这个对我有用。可以使用 Data URI 模板来创建 SVG 图像。

var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');

var data   = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
                 '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                   '<div id="controlDiv">s</div>' +
                 '</div>' +
               '</foreignObject>' +
             '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

替换数据中的 html 元素，其中 div <div id="controlDiv">s</div> 元素存在。

DEMO

我想这会对你有帮助。