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

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

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

非二进制细分有点棘手

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

技术是对细分的每个元素重复这个过程：

• 创建一个临时画布：var tempCanvas=document.createElement（'canvas'）；

• 使用tempContext.scale 缩放画布

• 使用上下文路径命令在图像上定义子路径：tempContext.beginPath ...

• 使用tempContext.clip 限制将来绘制到该路径

• 使用tempContext.drawImage在画布上绘制图像。由于已经定义了剪切区域，因此图像将仅在您定义的路径内绘制。

• 使用此临时画布作为图像源在主画布上绘制细分：mainContext.drawImage(tempCanvas,x,y)

以下是带有缩放的简单二进制细分的示例代码和演示：

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; 
      }
    }
  }
}

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

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