html5 canvas에서 이미지를 지우는 방법

Question

나는 html5 canvas를 사용하여 이미지 위에 흐림을 지울 수 있습니다. 나는 그 블러를 다른 이미지로 바꾸고 싶다. 하단 이미지가 아래에 표시되면 상단 이미지를 지우면 최종 결과를 보내고 싶습니다. 저는 easeljs 데모를 템플릿으로 사용하고 있습니다. 내가 편집해야 할 것 같은 느낌이

http://www.createjs.com/#!/EaselJS/demos/alphamask

는 HTML 페이지의 스크립트에 있지만 그것은보다 훨씬 더 깊은 수 있습니다.

(Full code can be viewed here)

HTML

<canvas id="testCanvas" width="960" height="400"></canvas> 

자바 스크립트

var stage; 
var isDrawing; 
var drawingCanvas; 
var oldPt; 
var oldMidPt; 
var displayCanvas; 
var image; 
var bitmap; 
var maskFilter; 
var cursor; 
var text; 
var blur; 

function init() { 
    if (window.top != window) { 
     document.getElementById("header").style.display = "none"; 
    } 

    document.getElementById("loader").className = "loader"; 

    image = new Image(); 
    image.onload = handleComplete; 
    image.src = "images/summer.jpg"; 

    stage = new createjs.Stage("testCanvas"); 
    text = new createjs.Text("Loading...", "20px Arial", "#999999"); 
      text.set({x:stage.canvas.width/2, y:stage.canvas.height-80}); 
    text.textAlign = "center"; 
} 

function handleComplete() { 
    document.getElementById("loader").className = ""; 
    createjs.Touch.enable(stage); 
    stage.enableMouseOver(); 

    stage.addEventListener("stagemousedown", handleMouseDown); 
    stage.addEventListener("stagemouseup", handleMouseUp); 
    stage.addEventListener("stagemousemove", handleMouseMove); 
    drawingCanvas = new createjs.Shape(); 
    bitmap = new createjs.Bitmap(image); 

    blur = new createjs.Bitmap(image); 
    blur.filters = [new createjs.BoxBlurFilter(15,15,2)]; 
    blur.cache(0,0,960,400); 
    blur.alpha = .5; 

    text.text = "Click and Drag to Reveal the Image."; 

    stage.addChild(blur, text, bitmap); 
    updateCacheImage(false); 

    cursor = new createjs.Shape(new  createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20)); 
    cursor.cursor = "pointer"; 

    stage.addChild(cursor); 
} 

function handleMouseDown(event) { 
    oldPt = new createjs.Point(stage.mouseX, stage.mouseY); 
    oldMidPt = oldPt; 

    isDrawing = true; 
} 

function handleMouseMove(event) { 
    cursor.x = stage.mouseX; 
    cursor.y = stage.mouseY; 

    if (!isDrawing) { 
     stage.update(); 
     return; 
    } 

    var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1); 

      drawingCanvas.graphics.setStrokeStyle(40, "round", "round") 
       .beginStroke("rgba(0,0,0,0.15)") 
       .moveTo(midPoint.x, midPoint.y) 
       .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); 

    oldPt.x = stage.mouseX; 
    oldPt.y = stage.mouseY; 

    oldMidPt.x = midPoint.x; 
    oldMidPt.y = midPoint.y; 

    updateCacheImage(true); 

} 

function handleMouseUp(event) { 
    updateCacheImage(true); 
    isDrawing = false; 
} 

function updateCacheImage(update) { 
    if (update) { 
     drawingCanvas.updateCache(0, 0, image.width, image.height); 
    } else { 
     drawingCanvas.cache(0, 0, image.width, image.height); 
    } 

    maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas); 

    bitmap.filters = [maskFilter]; 
    if (update) { 
     bitmap.updateCache(0, 0, image.width, image.height); 
    } else { 
     bitmap.cache(0, 0, image.width, image.height); 
    } 

    stage.update(); 
} 

Answer 1

, 당신은 다음과 같은 부분을 변경해야

function handleComplete() { 
    loaded++; // and initialize this variable in the very top with: var loaded = 0; 
    if (window.loaded < 2) return; 
    //... other stull 

을 마지막으로 다음과 같은 라인을 변경 : 2 개 이미지를로드 할 수 있도록, 당신은이를 추가 할 수 있도록

// old 
blur = new createjs.Bitmap(image); 
blur.filters = [new createjs.BoxBlurFilter(15,15,2)]; 
blur.cache(0,0,960,400); 
blur.alpha = .5; 

// new 
blur = new createjs.Bitmap(image2); 

이제 희미해진 이미지가 원하는 이미지로 바뀌어야합니다. 가장 좋은 방법은 아니지만 거기에 있어야합니다. 더 깊은 "더 깊은"작업을하려는 경우 튜토리얼을 시작하는 것이 좋습니다.

Answer 2

공통 좀는 janky, 방법은 비록 다시 크기의 캔버스가 진짜 빨리합니다. 따라서 <canvas> 요소를 width 및 height 개로 변경하십시오. 이렇게하면 캔버스의 모든 내용이 지워집니다.

일단 완료되면 바로 원하는대로 다시 설정하고 하단 이미지를 다시 그립니다.

내가 말했듯이이 방법은 다소 스케치 적이지만 일을 끝내야합니다. handleComplete() 지금 대기에서

image.src = "images/summer.jpg"; 
// add new part 
image2 = new Image(); 
image2.onload = handleComplete; 
image2.src = "images/your_newImage.jpg"; 

를 : 첫 번째 이미지의 로딩 후이 추가

: 당신은 단순히 흐림 이미지를 바꾸려면