Javascript 如何实现SVG'；s PreserveSpectratio="；xMinYMin切片“；对于画布drawImage方法。

在画布中为drawImage（）方法实现SVG的PreserveSpectratio=“xMinYMin slice”是否有解决方法？

在标记为重复的答案中，如果您像调用

drawImageProp（ctx，img，0，0，canvas.width，canvas.height，0，0）一样调用它，它确实执行与
xMinYMin slice
相同的操作

但是对于那些想要完整实现svg的
preserveAspectRatio
属性的人来说，这里有一个：

根据
drawImage（）
方法的请求，它确实返回一个带有
sx、sy、sw、sh、dx、dy、dw、dh的对象


var preserveAspectRatio=函数（源、目标、用户字符串）{
var srcWidth=source.width，
srchheight=source.height，
destinationW=destination.width，
destinationH=destination.height；
//我们应该保留全部来源
var aRMeet=函数（args）{
var srcRatio=（srchheight/srchwidth），
destatio=（destinationH/destinationW），
resulttwidth=destRatio>srcRatio？destinationW:destinationH/srcRatio，
ResultTheRight=destRatio>srcRatio？destinationW*srcRatio:destinationH；
var getPos=函数（arg、res、dest）{
var max=数学最大值（res，dest），
最小值=数学最小值（res，dest）；
开关（arg）{
案例“Min”：返回0；
案例“中”：返回（最大-最小）/2；
案例“Max”：返回Max-min；
默认值：返回“无效”；
}
};
var obj={
img:returnedImg，
sx:0，
sy:0，
swidth:srcWidth，
酋长：身高，
dx:getPos（参数[0]，结果宽度，目标W），
dy:getPos（args[1]，resultHeight，destinationH），
dwidth:resultWidth，
dheight:resultHeight
};
如果（obj[5]=“无效”| | obj[6]=“无效”）{
返回默认对象；
}
返回obj；
};
//我们应该把大部分切下来
var aRSlice=函数（args）{
var resultWidth，resultHeight；
var a=函数（）{
resultWidth=目的地W；
结果光=srcHeight*destinationW/srcWidth；
};
var b=函数（）{
resultWidth=srcWidth*destinationH/srcHeight；
结果权利=目的地H；
};
如果（destinationW>destinationH）{
a（）；
如果（destinationH>resultHeight）{
b（）；
}
}else if（destinationW==destinationH）{
如果（srcWidth>srcHeight）{
b（）；
}否则{
a（）；
}
}否则{
b（）；
如果（destinationW>resultWidth）{
a（）；
}
}
var getPos=函数（arg、res、dest、src）{
开关（arg）{
案例“Min”：返回0；
案例'Mid'：返回（res-dest）/2*src/res；
案例“最大”：返回值（res-dest）*src/res；
默认值：返回“无效”；
}
};
var x=getPos（args[0]，resultWidth，destinationW，srcWidth）；
变量y=getPos（参数[1]，结果灯，目标灯，SRCHight）；
var obj={
img:returnedImg，
sx:x，
sy:y，
swidth:srcWidth-x，
sheight:src高度-y，
dx:0，
dy:0,，
dwidth:resultWidth-（x*（resultWidth/srcWidth）），
dheight:resultHeight-（y*（resultHeight/srchheight）），
};
如果（obj[1]=“无效”| | obj[2]=“无效”）{
返回默认对象；
}
返回obj；
};
//检查传递的对象是否可在画布上绘制
var returnedImg=source.nodeName=='IMG'| | source.nodeName=='VIDEO'| | source.nodeName==='CANVAS'？source:null；
//如果将无效字符串或无设置为PreserveSpectratio，则应将其视为“xMidYMid meet”
var default_obj=aRMeet（['Mid'，'Mid']）；
如果（！userString）{
返回默认对象；
}否则{
var args=userString.trim（）.split（“”），
minMidMax=args[0]。替换（'x'，''）。拆分（'Y'）；
开关（args[args.length-1]）{
案例“满足”：返回aRMeet（minMidMax）；
案例“切片”：返回aRSlice（minMidMax）；
默认：返回默认对象；
}
}
};
//
//代码片段
//_______________
var images=[new Image（），new Image（），new Image（）]；
var img=图像[0]；
var-selects=document.querySelectorAll（'select'）；
var ctxL=output横向。getContext（'2d'）；
var ctxP=outputGrative.getContext（'2d'）；
var ctxS=outputSquare.getContext（'2d'）；
var update=函数（）{
ctxL.clearRect（0，0，output横向.宽度，output横向.高度）；
ctxP.clearRect（0，0，outputPicture.width，outputPicture.height）；
ctxS.clearRect（0，0，outputSquare.width，outputSquare.height）；
var aspectRatioStr='x'+选择[0]。值+'Y'+选择[1]。值+''+选择[2]。值；
var p=保留AspectRatio（img、OutputPicture、AspectRatioster）；
ctxP.drawImage（p.img、p.sx、p.sy、p.swidth、p.sheight、p.dx、p.dy、p.dwidth、p.dheight）；
var l=保存AspectRatio（img、outputLandscape、AspectRatioster）；
ctxL.drawImage（l.img、l.sx、l.sy、l.swidth、l.sheight、l.dx、l.dy、l.dwidth、l.dheight）；
var s=保留AspectRatio（img、outputSquare、AspectRatioster）；
ctxS.drawImage（s.img、s.sx、s.sy、s.swidth、s.sheigh、s.dx、s.dy、s.dwidth、s.dheight）；
setAttribute（'preserveSpectratio'，aspectratiost）；
setAttribute（'preserveSpectratio'，aspectratiost）；
setAttribute（'preserveSpectratio'，aspectratiost）；
};
对于（var i=0；i