Görüntüyü İyonik Uygulamada parmakla (dokunma) kırpma

Question

İyonik tabanlı Uygulama üzerinde çalışıyorum.My iyonik uygulama sürümü 1.2.4'tür. Uygulamamdaki İşlevsellik özelliğini kullanmak istiyorum. Dokunmadan görüntüyü düzensiz Şekil ile kırpmak istiyorum. Bu yüzden herkes dokunmatik değirmeni oluşturdu. Bu yüzden bana yardım et.

Daha açık bir şekilde, gif'in ne istediğine bakın.

Son 2 gün çözüm bulmak için googling ve basit kırpma veya kare veya dikdörtgen kırpma ama Dokunarak kırpma görüntü almıyor yapmak kolay olduğu tespit ediyorum.

Eğer herhangi biri yapmışsa, o zaman beni doğru yönde yönlendirin.

Answer 1

İşaretçi olayı mobil aygıtta çalışmıyor, bu nedenle bu, İyonik uygulamada veya herhangi bir çapraz platform uygulamasında tam çalışma ile bazı değişikliklere sahip koddur.

setTimeout(example,0); // ensures that the run us after parsing 
    function example(){ 
    const ctx = canvas.getContext("2d"); 
    var w = canvas.width; 
    var h = canvas.height; 
    var cw = w/2; // center 
    var ch = h/2; 

    var selectLayer = CImageCtx(w,h); // creates a canvas 
    var selectedContent = CImageCtx(w,h); // the selected content 
    document.getElementById("exampleEle").appendChild(selectedContent); 
    var image = new Image; // the image 
    //image.src = "img/temp.png"; 
    image.src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"; 
    // updates the masked result 
    function updateSelected(){ 
    var ctx = selectedContent.ctx; 
    ctx.drawImage(image,0,0); 
    ctx.globalCompositeOperation = "destination-in"; 
    ctx.drawImage(selectLayer,0,0); 
    ctx.globalCompositeOperation = "source-over"; 
    } 
    function update(){ 
     // if mouse down then 
     if(touch.but){ 
     // clear the mask if on the right image 
     if(touch.oldBut === false && touch.x > 256){ 
      selectLayer.ctx.clearRect(0,0,w,h); 
      touch.but = false; 
     }else{ 
      // draw the red 
      selectLayer.ctx.fillStyle = "red"; 
      fillCircle(touch.x, touch.y, 20, selectLayer.ctx); 
     } 
     // update the masked result 
     updateSelected(); 
     } 
     // clear the canvas 
     ctx.clearRect(0,0,w,h); 
     // draw the image 
     ctx.drawImage(image,0,0); 
     // then draw the marking layer over it with comp overlay 
     ctx.globalCompositeOperation = "overlay"; 
     ctx.drawImage(selectLayer,0,0); 
     ctx.globalCompositeOperation = "source-over"; 

     touch.oldBut = touch.but; 
     requestAnimationFrame(update); 
    } 
    requestAnimationFrame(update); 
} 
//############################################################################# 
// helper functions not part of the answer 
//############################################################################# 
const touch = { 
    x : 0, y : 0, but : false, 
    events(e){ 
    console.log("e.type",e); 
    const m = touch; 
    const bounds = canvas.getBoundingClientRect(); 
    var rect = e.target.getBoundingClientRect(); 
    if(e.targetTouches) { 
     X = parseInt(e.targetTouches[0].pageX - rect.left); 
     Y = parseInt(e.targetTouches[0].pageY - rect.top); 
    } 
    m.x = X; 
    m.y = Y; 
    m.but = e.type === "touchstart" ? true : e.type === "touchend" ? false : m.but; 
    } 
}; 
(["start","end","move"]).forEach(name => document.addEventListener("touch" + name,touch.events)); 
const CImage = (w = 128, h = w) => (c = document.createElement("canvas"),c.width = w,c.height = h, c); 
const CImageCtx = (w = 128, h = w) => (c = CImage(w,h), c.ctx = c.getContext("2d"), c); 
const fillCircle = (l,y=ctx,r=ctx,c=ctx) =>{if(l.p1){c=y; r=leng(l);y=l.p1.y;l=l.p1.x }else if(l.x){c=r;r=y;y=l.y;l=l.x}c.beginPath(); c.arc(l,y,r,0,Math.PI*2); c.fill()} 

Ve Görünüm İçin Bu 3 satırı html eklemeniz gerekir.

<div id="exampleEle"> 

    <canvas id="canvas" width=256 height=256></canvas> 
    </div> 

Answer 2

Sen 'iyonik yerli' dan {CropPlugin}

ithalat gerek;

Sen Temelde ben iyonik geliştirici değilim ama Googling sonra senin için yararlı olabilecek bazı kod bulundu https://github.com/alexk111/ngImgCrop ve https://github.com/jeduan/cordova-plugin-crop

Answer 3

bakabilirsiniz.

setTimeout(example,0); // ensures that the run us after parsing 
 
function example(){ 
 
    const ctx = canvas.getContext("2d"); 
 
    var w = canvas.width; 
 
    var h = canvas.height; 
 
    var cw = w/2; // center 
 
    var ch = h/2; 
 

 
    var selectLayer = CImageCtx(w,h); // creates a canvas 
 
    var selectedContent = CImageCtx(w,h); // the selected content 
 
    document.body.appendChild(selectedContent); 
 
    var image = new Image; // the image 
 
    image.src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"; 
 
    // updates the masked result 
 
    function updateSelected(){ 
 
    var ctx = selectedContent.ctx; 
 
    ctx.drawImage(image,0,0); 
 
    ctx.globalCompositeOperation = "destination-in"; 
 
    ctx.drawImage(selectLayer,0,0); 
 
    ctx.globalCompositeOperation = "source-over"; 
 
    } 
 
    function update(){ 
 
     // if mouse down then 
 
     if(mouse.but){ 
 
     // clear the mask if on the right image 
 
     if(mouse.oldBut === false && mouse.x > 256){ 
 
      selectLayer.ctx.clearRect(0,0,w,h); 
 
      mouse.but = false; 
 
     }else{ 
 
      // draw the red 
 
      selectLayer.ctx.fillStyle = "red"; 
 
      fillCircle(mouse.x, mouse.y, 10, selectLayer.ctx); 
 
     } 
 
     // update the masked result 
 
     updateSelected(); 
 
     } 
 

 
     // clear the canvas 
 
     ctx.clearRect(0,0,w,h); 
 
     // draw the image 
 
     ctx.drawImage(image,0,0); 
 
     // then draw the marking layer over it with comp overlay 
 
     ctx.globalCompositeOperation = "overlay"; 
 
     ctx.drawImage(selectLayer,0,0); 
 
     ctx.globalCompositeOperation = "source-over"; 
 

 
     mouse.oldBut = mouse.but; 
 
     requestAnimationFrame(update); 
 
    } 
 
    requestAnimationFrame(update); 
 
} 
 

 
const mouse = { 
 
    x : 0, y : 0, but : false, 
 
    events(e){ 
 
    const m = mouse; 
 
    const bounds = canvas.getBoundingClientRect(); 
 
    m.x = e.pageX - bounds.left - scrollX; 
 
    m.y = e.pageY - bounds.top - scrollY; 
 
    m.but = e.type === "pointerdown" ? true : e.type === "pointerup" ? false : m.but; 
 
    } 
 
}; 
 

 
document.addEventListener('pointerdown', mouse.events); 
 
document.addEventListener('pointerup', mouse.events); 
 
document.addEventListener('pointermove', mouse.events); 
 

 
const CImage = (w = 128, h = w) => (c = document.createElement("canvas"),c.width = w,c.height = h, c); 
 
const CImageCtx = (w = 128, h = w) => (c = CImage(w,h), c.ctx = c.getContext("2d"), c); 
 
const fillCircle = (l,y=ctx,r=ctx,c=ctx) =>{if(l.p1){c=y; r=leng(l);y=l.p1.y;l=l.p1.x }else if(l.x){c=r;r=y;y=l.y;l=l.x}c.beginPath(); c.arc(l,y,r,0,Math.PI*2); c.fill()}

Draw on image and the selected parts are shown on the right<br> 
 
Click right image to reset selection<br> 
 
<canvas id="canvas" width=256 height=256></canvas>

Kontrol

kod parçacığını çalıştırmak için.