캔버스 이미지가 Chrome에서 렌더링되지 않음 (FF4 및 IE9에서 작동)

내가 엉망이되었습니다. 내 인생에서 Chrome에서이 기능이 작동하지 않는 이유를 알 수 없습니다. 내가 그것을 잘 작동 FF 또는 IE9에서이 코드를 위로 당겨 때캔버스 이미지가 Chrome에서 렌더링되지 않음 (FF4 및 IE9에서 작동)

http://jsfiddle.net/corydorning/NgXSH/

: 당신은 여기에 코드를 볼 수 있습니다. 바이올린은 렌더링 된 요소로 Chrome에서 작동하지만 피들 외부에서는 작동하지 않습니다.

도움을 주시면 대단히 감사하겠습니다. 이것이 캔버스를 사용한 첫 번째 시도입니다.

출처

2011-04-27 CoryDorning

크롬에서 작동하는 것처럼 보입니까? 내가 Google 로고를보고 있을까요? – Neal

간헐적으로 이미지로드 중 b/c가 작동합니다. 너 운이 좋았어. :) – CoryDorning

문제는 원래 이미지 요소가로드 될 때까지 기다리지 않는다는 것입니다. 약간 변경하면 제대로 작동합니다.

$(function() { 
    var canvas = document.createElement('canvas'), 
    canvasExists = !!(canvas.getContext && canvas.getContext('2d')), 
    oImage = $('img')[0]; 

    if (canvasExists) { 
     var context = canvas.getContext('2d'), img = new Image(); 

     img.onload = function() { 
     canvas.height = img.height; 
     canvas.width = img.width; 

     $(oImage).replaceWith(canvas); 

     context.drawImage(oImage, 0, 0); 
     } 

     img.src = oImage.src; 
    } else { 
     // apply MS filters 
    }

출처

2011-04-27 16:29:51 Pointy

굉장해! 위대한 작품! 호기심 때문에 왜 새로운 이미지를 만들고 src를 원래 이미지로 설정해야합니까? 아니면 기존 이미지를 사용해야합니까? – CoryDorning

글쎄, 내가 생각한 ''요소에 "load"핸들러를 넣을 수 있습니다. 방금 습관대로 작성했습니다. 요점은 브라우저가 너비/높이를 얻으려고 시도하기 전에 이미지에 손이 있다고 생각할 때까지 기다리고 싶다는 것입니다 (물론 실제 픽셀 :-)). – Pointy

많은 정보가 있으면 img.onload를 사용하는 것이 어려울 수 있습니다.

$(window).load(function() {

대신 $ (창) .load 실제로로드 할 모든 이미지를 기다리는 등

$(document).ready(function() {

의 : 이미지 로딩을 기다리는 크롬 쉬운 방법은 사용하는 것입니다.

캔버스에서 이미지를 사용하는 데는 완벽하게 작동합니다. (firefow 및 IE에서도 작동)

출처

2013-09-07 17:51:01 Chaak

캔버스 이미지가 Chrome에서 렌더링되지 않음 (FF4 및 IE9에서 작동)

답변

관련 문제