Angular1 Ionic1에서 그리는 방법을 알고 있습니다.
내 HTML에서 :
<img ng-src="{{image}}" style="width: 100%">
<canvas id="tempCanvas"></canvas>
내 컨트롤러에서
var startimg="img/face.jpg";
$scope.image=startimg;
var canvas = document.getElementById('tempCanvas');
var context = canvas.getContext('2d');
var source = new Image();
source.src = startimg;
canvas.width = source.width;
canvas.height = source.height;
console.log(canvas);
context.drawImage(source,0,0);
context.font = "100px impact";
textWidth = context.measureText($scope.frase).width;
if (textWidth > canvas.offsetWidth) {
context.font = "40px impact";
}
context.textAlign = 'center';
context.fillStyle = 'white';
context.fillText('HELLO WORLD',canvas.width/2,canvas.height*0.8);
var imgURI = canvas.toDataURL();
$timeout( function(){
$scope.image = imgURI;
}, 200);
이 코드는 확실히 얼굴 이미지 위에 HELLO WORLD 텍스트를 그릴 것입니다.
그러나 Ionic2 / Angular2에서는 작동하지 않는 것 같습니다. 나는 일을 할 수조차 없다 document.getElementById('tempCanvas').
도와주세요.
감사.
다음과 같이 작성할 수 있습니다.
@Component({
selector: 'my-app',
template: `<h1>Angular 2 Systemjs start</h1>
<img [src]="image">
<canvas #layout></canvas>
`
})
export class App {
@ViewChild('layout') canvasRef;
image = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
ngAfterViewInit() {
let canvas = this.canvasRef.nativeElement;
let context = canvas.getContext('2d');
let source = new Image();
source.crossOrigin = 'Anonymous';
source.onload = () => {
canvas.height = source.height;
canvas.width = source.width;
context.drawImage(source, 0, 0);
context.font = "100px impact";
context.textAlign = 'center';
context.fillStyle = 'black';
context.fillText('HELLO WORLD', canvas.width / 2, canvas.height * 0.8);
this.image = canvas.toDataURL();
};
source.src = this.image;
}
}
plunkr https://plnkr.co/edit/qAGyQVqbo3IGSFzC0DcQ?p=preview 참조
또는 다음과 같은 사용자 지정 지시문을 사용할 수 있습니다.
@Directive({
selector: '[draw-text]'
})
class ImageDrawTextDirective {
loaded = false;
@Input() text: String;
@HostListener('load', ['$event.target'])
onLoad(img) {
if(this.loaded) {
return;
}
this.loaded = true;
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = img.height;
canvas.width = img.width;
context.drawImage(img, 0, 0);
context.font = "100px impact";
context.textAlign = 'center';
context.fillStyle = 'black';
context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);
img.src = canvas.toDataURL();
}
}
이 경우 plunkr 참조 https://plnkr.co/edit/BrbAoBlLcbDcx8iDXACv?p=preview
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다