在Ionic App中通过手指（触摸）裁剪图像 [英] Crop image via finger(touch) in Ionic App

问题描述

我正在研究基于离子的Application.My离子应用版本是1.2.4。我想在我的应用程序中裁剪功能。我想用不规则形状裁剪图像Via Touch。所以任何人都有创造触摸裁剪，所以PLZ帮助我。

I am Working on ionic based Application.My ionic app version is 1.2.4. I want to Crop Functionality in my application. I want to crop image Via Touch with irregular Shape. So anyone has Create touch cropper So plz help me.

更清楚的是，请看下面的gif我想要的东西。

For more clearly, look at below gif what I want.

过去2天我在谷歌搜索找到解决方案，发现很容易做简单的裁剪或方形或矩形裁剪但不能通过触摸获得裁剪图像。

Last 2 day I'm googling to find the solution and found that it's easy to do simple crop or square or rectangular crop but not getting crop image by touch.

如果有人这样做，那么建议我朝正确的方向发展。

If anybody has done it then suggest me in the right direction.

推荐答案

指针事件在移动设备中不起作用，因此这是在Ionic应用程序或任何跨平台应用程序中完成一些修改的代码。

Pointer event is not working in mobile device, so this is the code with some modification with complete working in Ionic application Or any cross platform application.

 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()}

对于视图你必须添加这3行html。

And For View You have to add this 3 lines of html.

  <div id="exampleEle">

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

这篇关于在Ionic App中通过手指（触摸）裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！