Commit 3546c2ea authored by liujiangnan's avatar liujiangnan

feat: 封面

parent 5cd3cb95
<div id="canvas"
[style.background-color]="item.contentObj.bgColor"
>
<p>{{item.contentObj.title||"Text"}}</p>
</div>
<div class="p-title-box">
<span class="p-title">Thumb Title</span>
<input nz-input (change)="extraData.changeDirtyCount=extraData.changeDirtyCount+1"
<input nz-input (change)="onTitleChange()"
[(ngModel)]="item.contentObj.title"
placeholder="please enter thumb title"
/>
......
......@@ -15,6 +15,28 @@
src: url('../../assets/font/ChalkboardSE-Regular.woff') format('WOFF');
}
#canvas {
position: absolute;
top: -500px;
left: -500px;
z-index: 9999;
width: 170px;
height: 96px;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
margin:0 auto;
word-break: break-all;
p {
margin-bottom: 0;
}
}
.p-title-box {
.p-title {
font-size: 20px;
......
......@@ -12,6 +12,12 @@ import {
} from '@angular/core';
import * as _ from 'lodash';
import { NzMessageService } from 'ng-zorro-antd';
import {HttpClient} from '@angular/common/http';
import html2canvas from 'html2canvas';
const AnimationType = [
{
name: 'Slide',
......@@ -110,9 +116,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
AnimationType = AnimationType;
uploadUrl;
uploadData;
constructor(private appRef: ApplicationRef,
private http: HttpClient,
private nzMessageService: NzMessageService,
private changeDetectorRef: ChangeDetectorRef) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.fontSizeRange = [];
for (let i = this.MIN_FONT_SIZE; i <= this.MAX_FONT_SIZE; ++i) {
this.fontSizeRange.push(i);
......@@ -275,6 +286,43 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
onTitleChange() {
this.extraData.changeDirtyCount = this.extraData.changeDirtyCount+1;
html2canvas(document.getElementById("canvas")).then(function(canvas) {
// document.body.appendChild(canvas);
const video_preview_thumb = canvas.toDataURL();
const img = this.convertImageToBlob(video_preview_thumb);
const formData = new FormData();
const ext = img.type.replace('image/', '');
formData.append('file', img, `cover.${ext}`);
this.http.post(this.uploadUrl, formData).subscribe(
(res: any) => {
(window as any).courseware.sendEvent("screenshot", {"url": res.url}, this.saveKey);
this.item.contentObj.pic_id = res.url;
this.save();
},
(err) => {
console.log(err);
this.nzMessageService.error('封面截取失败');
}
);
});
}
convertImageToBlob(data) {
const imgType = data.substring(data.indexOf(':') + 1, data.indexOf(';'));
const binary = atob(data.split(',')[1]);
const array = [];
let i = 0;
while (i < binary.length) {
array.push (binary.charCodeAt(i));
i++;
}
return new Blob([ new Uint8Array(array) ], {type: imgType});
}
onSelect(item, event) {
this.curItem = item;
this.curDom = event.target;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment