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