html - 用于将 html 转换为图像的自定义代码，可以将其传递给 blob 并在其他屏幕中呈现为图像

Question

我的目标是将 html 代码转换为图像(svg 或 Canvas )[推荐的方式，因为它必须在其他屏幕上再次呈现] 并将其作为 blob 传递给后端(我使用的是 Angular7)

uploadfloor(): void {
  let file1 = document.getElementsById('toget')[0].outerHTML;
  let svgBlob = new Blob([file1], {
    type: "image/svg+xml;charset=utf-8"
  });
  let file = this.fileUploadService.convertToFile(svgBlob, "abc.svg");
  this.fileUploadService.uploadFile(file)
 }

  <div class="anystyle" id="toget" appDropzone    appMovableArea 
  (drop)="move(currentBox, dropzone1)"  [ngStyle]=" 
   {'width':'100%','background-image': 'url('+url+')', 'background-repeat': 
   'no-repeat', 'background-position': 'center', 'background-size': '100% 
     100%'}">
           <div *ngFor="let box of dropzone1" class="box"
             appDroppable (dragStart)="currentBox = box" appMovable>
                {{ box.dis }}
           </div>
  </div>

我浏览了引用资料、stackoverflow，但到处都使用了外部库。请帮助。谢谢

按照答案进行操作后，我可以上传和渲染图像，但现在的问题是子 div 的位置(使用 *ngFor="let box of dropzone1")放置在父 div(parent div id="toget ") 在创建 blob 之前和从 blob 中检索它之后是不一样的，这超出了整个目的。请建议如何将 html 转换为 blob，然后从 blob 检索数据并将其转换回 html。

我试过的代码如下

用于从 html 创建 blob

var newString = new 
  XMLSerializer().serializeToString(document.getElementById('toget'));

  var newBlob = new Blob([newString], { type: "image/svg+xml;charset=utf-8" 
 });

  let file = this.convertToFile(newBlob, "floorPlan.svg");
  this.uploadFile(file);


  convertToFile(blobFile: Blob, fileName: string): File {
  let blob: any = blobFile;

  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return <File>blobFile;
}

  this.uploadFile(file, this.siteRef, this.floorRef).subscribe()

  uploadFile(file){
  return this.uploadToBlobStorage(file)
      .pipe(map(progress => this.mapProgress(file, progress)));
      }

我收到的供引用的 blob 数据:

"<div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c18="" appdropzone="" 
appmovablearea=""
class="dropzone fs-settings__upload-section__floor-wrapper__preview- 
image__image-area" id="toget" ng-reflect-ng-style="[object Object]"
style="width: 100%; background-image: 
url(&quot;data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAALoAAAC6CAMAAAAu0KfDAAAAwFBMVEX////  
k9ykpOc5CQnOcnR8n/9ySZhLa0CgAAAAABJRU5ErkJggg==&quot;); background-repeat: 
no-repeat; background-position: center center; background-size: 100% 100%;"> 
<!--bindings={
"ng-reflect-ng-for-of": ""
}--><div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
draggable movable ng-star-inserted" touch-action="none" style="transform: 
translateX(798.4px) translateY(15.2px);">
vav21 </div><div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
 draggable movable ng-star-inserted" 
touch-action="none" style="transform: translateX(22.4px) 
translateY(58.4px);"> vav22 </div></div>"

以及将blob渲染成html的代码。

this.getBlobToText('abc', (err, data) => {
    xy.image = (data) ? data  : 'not loaded';
}

<div [innerHTML]="xy.image"></div>

希望至少现在我能得到一个解决方案。:)

Answer 1

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var png = canvas.toDataURL("image/png");
    DOMURL.revokeObjectURL(png);
};
img.src = url;

我正在使用“svg”。你也可以使用任何 html 标签