fabric.Image.fromURL()방법으로 로드 한 이미지가있는 fabricjs 캔버스가 있습니다.
SVG로 내 보내야하지만 이미지를 링크가 아닌 base64의 임베디드 소스로 내보내고 싶습니다.
내가 어떻게 해? 링크가 아닌 소스로 이미지를로드하는 방법이 있습니까?
예제 코드 :
로딩 이미지 :
fabric.Image.fromURL('./assets/people.jpg', function (image) {
image.set({
left: 10,
top: 30
});
canvas.add(image);
};
SVG로 내보내기 :
canvas.toSVG();
내 보낸 SVG에는 다음이 있습니다.
<image xlink:href="http://localhost:8383/app/assets/people.png" />
하지만 다음과 같이 base64에서 원합니다.
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe8AAAKuCAYAAACIZZSZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx(...)" />
옵션은 없지만 다음과 같이 쉽게 얻을 수 있습니다. Image에는 'getSvgSrc'라는 메서드가 있습니다.
다음과 같이 재정의하십시오.
fabric.Image.prototype.getSvgSrc = function() {
return this.toDataURLforSVG();
};
fabric.Image.prototype.toDataURLforSVG = function(options) {
var el = fabric.util.createCanvasElement();
el.width = this._element.naturalWidth || this._element.width;
el.height = this._element.naturalHeight || this._element.height;
el.getContext("2d").drawImage(this._element, 0, 0);
var data = el.toDataURL(options);
return data;
};
이렇게하면 svg에 대한 통합 이미지를 얻을 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다