이미지를 Base64로 변환 테두리 이미지 스타일 포함

Question

사용자가 이미지를 자르고 해당 이미지의 테두리를 선택할 수있는 앱을 개발 중입니다. 경계 스타일이있는 이미지를 Javascript를 통해 base64로 변환 할 수 있다면 알고 싶습니다.

var img = new Image(); 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
var pat = canvasContext.createPattern(img,"repeat"); 
canvasContext.strokeStyle = pat; 
canvasContext.lineWidth = 5; 
canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height); 

위의 코드는 검은 색 테두리를 캔버스에 추가합니다.

이제 이미지/패턴을 캔버스 테두리로 추가하고 싶습니다.

업데이트 : @ K3N의 답변에 따라 자른 이미지로 새 캔버스를 만들고 패턴 테두리를 추가했습니다. 내 필요를 위해 일했습니다.

Answer 1

나는 캔버스에 직접이 일을 추천 할 것입니다. DOM + CSS는 캔버스에서 드로잉을위한 비트 맵으로 쉽게 전송할 수 없기 때문에 CSS 스타일을 시뮬레이션하는 대신 캔버스에 직접 그려서 캔버스에서 드로잉을 끝낼 수도 있습니다.

캔버스에서 패턴을 사용할 수 있지만 이미지가로드 될 때까지 기다리는 것이 중요합니다. 이미지 로딩이 비동기이며 createPattern()으로 전화를 걸면 이미지가로드 및 디코딩되지 않아 빈 패턴이 생성 될 수 있습니다. 간단하게 확인하기 위해로드 이벤트를 사용

var img = new Image(), pat; 
img.onload = function() {       // wait for image to load 
    pat = canvasContext.createPattern(this, "repeat"); // image is ready (here "this") 
    canvasContext.strokeStyle = pat; 
    canvasContext.lineWidth = 5; 
    canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);  
    // next step (if any) from here ... 
}; 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 

물론이 경계가 적용되기 전에 캔버스에 그려진 이미지에 적용됩니다. 이러한 이유로 캔버스에 필요한 모든 이미지를 미리로드하여 올바른 그리기 순서를 보장 할 것을 권장합니다.

Answer 2

Croppie을 사용해보세요. 결과적으로 자른 이미지가 base64 인 jQuery 플러그인입니다.

https://foliotek.github.io/Croppie/

내가 지금이 아닌 JQuery와 버전을 가지고 있지 않지만, Croppie 괜찮은이다.