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

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

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

如果您正在执行简单的二进制细分，则可以使用扩展版的

context.drawImage

从主画布剪裁每个磁贴，并根据需要缩放任何细分。请参见下面的示例

非二进制细分有点棘手…

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

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

• 创建临时画布：var tempCanvas=document.createElement（“画布”）

• 使用

  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=画布宽度；
var ch=画布高度；
var细分=[]；
var细分指数=0；
推({
x:0，y:0，
宽度：174/2，高度：110/2，
比例：1.00，最大比例：2.00，比例方向：1
});
推({
x:174/2，y:0，
宽度：174/2，高度：110/2，
比例：1.00，最大比例：2.00，比例方向：1
});
推({
x:0，y:110/2，
宽度：174/2，高度：110/2，
比例：1.00，最大比例：2.00，比例方向：1
});
推({
x:174/2，y:110/2，
宽度：174/2，高度：110/2，
比例：1.00，最大比例：2.00，比例方向：1
});
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg";
函数start（）{
制作动画（）；
}
功能图{
var x=s.x；
var y=s.y；
var w=s.宽度；
var h=s.高度；
var scaledW=w*s.scale；
var scaledH=h*s.刻度；
ctx.clearRect（0,0，cw，ch）；
ctx.drawImage（img，0,0）；
ctx.drawImage(
img，//来自img的剪辑
x、 y、w、h、//剪裁细分
x、 y，缩放W，缩放H//按比例绘制细分
)
}
函数animate（）{
请求动画帧（动画）；
var s=细分[细分指数]；
抽签；
如果（s.scaleDirection>0）{
s、 比例*=1.02；
如果（s.scale>s.maxScale）{s.scaleDirection=-1；}
}否则{
s、 比例/=1.02；
if（s.scalesubdivisions.length-1）{
细分指数=0；
}
}
}
}

body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}

缩放二值细分图像的细分