Question

我可以使用自定义算法在js / canvas中缩放图像，例如二进制细分还是其他？

Answer 1

是的...您可以使用html5画布进行自定义图像细分。

如果您正在进行简单的二进制细分，则可以使用context.drawImage的扩展版本从主画布剪切每个图块并根据需要缩放任何细分。请参阅下面的示例。

非二元细分有点棘手......

您的自定义算法必须生成所需细分的每个单独路径的顶点或曲线控制点。

该技术是为细分的每个元素重复此过程：

创建临时画布：var tempCanvas = document.createElement（＆＃39; canvas＆＃39;）;
使用tempContext.scale
使用上下文路径命令在图像上定义子路径：tempContext.beginPath ...
使用tempContext.clip
使用tempContext.drawImage将图像绘制到画布上。由于已定义剪裁区域，因此图像将仅在您已定义的路径中绘制。
使用此临时画布作为图像源在主画布上绘制细分：mainContext.drawImage(tempCanvas,x,y)

这里的示例代码和带缩放的简单二进制细分演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var subdivisions=[];
var subdivisionIndex=0;

subdivisions.push({
  x:0,y:0,
  width:174/2,height:110/2,
  scale:1.00,maxScale:2.00,scaleDirection:1
});
subdivisions.push({
  x:174/2,y:0,
  width:174/2,height:110/2,
  scale:1.00,maxScale:2.00,scaleDirection:1
});
subdivisions.push({
  x:0,y:110/2,
  width:174/2,height:110/2,
  scale:1.00,maxScale:2.00,scaleDirection:1
});
subdivisions.push({
  x:174/2,y:110/2,
  width:174/2,height:110/2,
  scale:1.00,maxScale:2.00,scaleDirection:1
});


var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg";
function start(){
  animate();
}

function draw(s){
  var x=s.x;
  var y=s.y;
  var w=s.width;
  var h=s.height;
  var scaledW=w*s.scale;
  var scaledH=h*s.scale;
  ctx.clearRect(0,0,cw,ch);
  ctx.drawImage(img,0,0);
  ctx.drawImage(
    img,        // clip from img
    x,y,w,h,    // clip a subdivision 
    x,y,scaledW,scaledH  // draw the subdivision scaled
  )
}

function animate(){
  requestAnimationFrame(animate);

  var s=subdivisions[subdivisionIndex];
  draw(s);


  if(s.scaleDirection>0){
    s.scale*=1.02;
    if(s.scale>s.maxScale){s.scaleDirection=-1;}
  }else{
    s.scale/=1.02;
    if(s.scale<1.00){
      s.scale=1.00;
      s.scaleDirection=1;
      subdivisionIndex++;
      if(subdivisionIndex>subdivisions.length-1){
        subdivisionIndex=0; 
      }
    }
  }

}

＆＃13;

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

＆＃13;

<h4>Scaling subdivisions of a binary subdivided image</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

使用二进制细分算法使用js缩放图像

1 个答案: