페이지의 첫 번째로드시 캔바스에 이미지가 표시되지 않습니다.

Question

저는 meme 생성기를 개발 중이며이 작업을 위해 fabricjs 및 캔버스를 사용합니다. 페이지 이미지의 첫 번째로드가 캔버스에 복사되지 않습니다 그러나에, 캔버스는 다음과 같이 비어, 또는 파이어 폭스에서 Ctrl + F5를 눌러 :

HTML :

<div class="col-centered" style="padding-top:15px;"> 
    <canvas id="canvas" width="{{$meme->width}}" height="{{$meme->height}}" style="border:0px solid white"></canvas> 
</div> 

자바 스크립트 여기

내 코드입니다 :

var canvas = new fabric.Canvas('canvas'); 
canvas.selection = false; 
canvas.renderAll(); 

Answer 1

귀하의 웹 사이트를 테스트 한 결과, 이미지를 다운로드하는 데 시간이 걸리므로 캔버스가 비어있는 것으로 나타났습니다.

JavaScript가이 코드를 실행할 때 이미지가 아직 다운로드되지 않았습니다. 그것은이 문제를 해결 할 수 있습니다에

canvas.add(imgInstance); 
canvas.renderAll(); 

봅니다 fabric.Image.fromURL 대신하고 바인드 콜백 함수를 사용합니다.

주 JSfiddle https://jsfiddle.net/7doq6gvh/1/에

var imgElement = document.getElementById('originalmeme'); 
var imgSource = imgElement.src; 

fabric.Image.fromURL(imgSource, function(img) { 
    img.set({top: 0, left: 0, angle: 0, opacity: 1, selectable: false}); 
    canvas.add(img); 
}); 

예 :는해도 여전히 이미지를 다운로드하는 시간을 fabric.Image.fromURL를 사용하여. 이미지를 다운로드하는 데 6 ~ 8 초 정도 걸립니다. 다른 호스트의 이미지를 호스트하려고하면 도움이 될 수 있습니다.

참고 2 : 페이지를 새로 고침 할 때 표시되는 이유는 브라우저가 이미 첫 번째로드에서 이미지를 캐시하기 때문입니다.

Answer 2

fabric.js과 좋은 솔루션입니다

하지만이 window.onload = function() {<your canvas script> }