繁体   English   中英

在Ionic App中通过手指(触摸)裁剪图像

[英]Crop image via finger(touch) in Ionic App

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

为了更清楚,请看下面的gif我想要什么。

在此输入图像描述

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

如果有人这样做,那么建议我朝着正确的方向前进。

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

 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。

  <div id="exampleEle">

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

基本上我不是离子开发者但谷歌搜索后发现一些可能对你有帮助的代码。

 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(); mx = e.pageX - bounds.left - scrollX; my = 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(lx){c=r;r=y;y=ly;l=lx}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> 

选中以运行代码段。

你需要

从'ionic-native'导入{CropPlugin};

您可以查看https://github.com/alexk111/ngImgCrophttps://github.com/jeduan/cordova-plugin-crop

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM