23 changed files with 710 additions and 780 deletions
@ -1,8 +0,0 @@
|
||||
<div class="box"> |
||||
<button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> |
||||
<div id="mapxxx"></div> |
||||
<div class="img"> |
||||
<img [src]="canvasImg" alt=""> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,17 +0,0 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
#mapxxx{ |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.img{ |
||||
width: 500px; |
||||
height: 500px; |
||||
img{ |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { TestComponent } from './test.component'; |
||||
|
||||
describe('TestComponent', () => { |
||||
let component: TestComponent; |
||||
let fixture: ComponentFixture<TestComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ TestComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(TestComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,56 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
declare var html2canvas: any; |
||||
declare var AMap: any; |
||||
@Component({ |
||||
selector: 'app-test', |
||||
templateUrl: './test.component.html', |
||||
styleUrls: ['./test.component.scss'] |
||||
}) |
||||
export class TestComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
map: any |
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
this.map = new AMap.Map('mapxxx', { |
||||
WebGLParams: { |
||||
preserveDrawingBuffer: true |
||||
} |
||||
}); |
||||
|
||||
this.map.setCity('上海市'); |
||||
}, 0); |
||||
} |
||||
//生成图片
|
||||
canvasImg |
||||
createimg() { |
||||
|
||||
// 使用html2canvas插件，将数据源中的数据转换成画布。
|
||||
html2canvas(document.querySelector("#mapxxx"), { |
||||
useCORS: true, |
||||
onrendered: function (canvas) { |
||||
var dataUrl = canvas.toDataURL("image/png"); |
||||
} |
||||
}).then(canvas => { |
||||
// 修改生成的宽度
|
||||
// canvas.style.width = "1000px";
|
||||
console.log(canvas, "生成的画布文件"); |
||||
this.canvasImg = canvas.toDataURL("image/png"); |
||||
// console.log(this.canvasImg)
|
||||
}).then(() => { |
||||
this.downloadFile("导出图片", this.canvasImg); |
||||
|
||||
}) |
||||
|
||||
} |
||||
downloadFile(filename, content) { |
||||
var base64Img = content; |
||||
var oA = document.createElement('a'); |
||||
oA.href = base64Img; |
||||
oA.download = filename; |
||||
var event = document.createEvent('MouseEvents'); |
||||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
||||
oA.dispatchEvent(event); |
||||
} |
||||
|
||||
} |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue