仿真画布中的div行为

我有一个用户可以插入文本框和图像的dom编辑器。我的一个要求是将编辑器中的内容保存到图像中。我做了一些研究并提供了一些解决方案，但它们看起来并不百分之百安全。我试着实现自己的解决方案，在这里和那里重挫代码：仿真画布中的div行为

function measureText(text, size, font) { 
      var lDiv = document.createElement('lDiv'); 

      document.body.appendChild(lDiv); 

      lDiv.style.fontSize = size; 
      lDiv.style.fontFamily = font; 
      lDiv.style.position = "absolute"; 
      lDiv.style.left = -1000; 
      lDiv.style.top = -1000; 

      lDiv.innerHTML = text; 

        var metrics = font.measureText(text, size.slice(0, size.length - 2)); 
       var lResult = { 
        width: lDiv.clientWidth, 
        height: metrics.height + lDiv.clientHeight 
       }; 

       document.body.removeChild(lDiv); 
       lDiv = null; 


       return lResult; 


     } 

     function wrapText(context, item) { 

      var words = item.text.split(' '); 
      var line = ''; 
      var x = parseInt(item.x); 
      var y = parseInt(item.y); 
      var width = parseInt(item.width.slice(0, item.width.length - 2)); 
      var height = parseInt(item.height.slice(0, item.height.length - 2)); 
      var fontsize = parseInt(item.size.slice(0, item.size.length - 2)); 


      var font = new Font(); 

      font.onload = function() { 
       context.save(); 

       context.beginPath(); 
       context.rect(x, y, width, height); 
       context.clip(); 
       context.font = item.size + " " + item.font; 
       context.textBaseline = "top"; 
       for (var n = 0; n < words.length; n++) { 
        var testLine = line + words[n] + ' '; 

        var metrics = measureText(testLine, item.size, font); 
        var testWidth = metrics.width; 
        if (testWidth > width && n > 0) { 
         console.log("Drawing '" + line + "' to " + x + " " + y); 

         context.fillText(line, x, y); 
         line = words[n] + ' '; 
         y += metrics.height 
        } 
        else { 
         line = testLine; 
        } 
       } 

       context.fillText(line, x, y); 
       context.restore(); 
      } 

      font.fontFamily = item.font; 
      font.src = font.fontFamily; 


     } 


     this.toImage = function() { 
      console.log("testing"); 

      var canvas = document.getElementById("testcanvas"); 
      canvas.width = 400; 
      canvas.height = 400; 
      var ctx = canvas.getContext("2d"); 

      var imageObj = new Image(); 
      var thisService = this; 
      imageObj.onload = function() { 

       ctx.drawImage(imageObj, 0, 0, 400, 400); 


       for (var i = 0; i < thisService.canvasItems.length; i++) { 
        var component = thisService.canvasItems[i]; 
        if (component.type == "textbox") { 
         var x = component.x.slice(0, component.x.length - 2); 
         var y = component.y.slice(0, component.y.length - 2); 
         var w = component.width.slice(0, component.width.length - 2); 
         var h = component.height.slice(0, component.height.length - 2); 

         wrapText(ctx, component); 



        } 
       } 


      }; 


      imageObj.src = this.base.front_image; 

     }

不知何故，我相信，我几乎成功了，但是从 screenshot ，

似乎有一些定位/ FONT安置问题，只有几个像素。顶部1没有填充的div（其模型可以在左侧的面板上看到），而底部是画布。

我希望在这里有1对1的准确映射，任何人都可以启发什么可能是问题？

来源

2013-12-18 goh

据我所知，由于明显的“安全”原因，无法将HTML以100％的准确率绘制到画布中。

使用rasterizeHTML.js库仍然可以非常接近。它使用包含要渲染的内容的SVG图像。要绘制HTML内容，您需要使用包含HTML的元素，然后将该SVG图像绘制到画布中。

来源

2013-12-19 17:38:02

仿真画布中的div行为

回答

相关问题