如何实现SVG的preserveAspectRatio =“xMinYMin slice”用于canvas drawImage方法。 [英] How to implement SVG's preserveAspectRatio="xMinYMin slice" for canvas drawImage method.
本文介绍了如何实现SVG的preserveAspectRatio =“xMinYMin slice”用于canvas drawImage方法。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在canvas中实现SVG的preserveAspectRatio =xMinYMin slice是否有drawImage（）方法的解决方法？
解决方案
a href =http://stackoverflow.com/questions/21961839/simulation-back-size-cover-in-canvas>肯的回答在标记为重复的答案确实做同样的操作 xMinYMin slice 如果你像 drawImageProp（ctx，img，0，0，canvas.width，canvas.height，0,0）。
但是对于想要完整实现svg的 preserveAspectRatio 属性的人，这里是一个：
它根据请求返回一个对象 sx，sy，sw，sh，dx，dy，dw，dh drawImage（）方法。
var preserveAspectRatio = function（source，destination，userString） {var srcWidth = source.width，srcHeight = source.height，destinationW = destination.width，destinationH = destination.height; //我们应该保留整个源var aRMeet = function（args）{var srcRatio =（srcHeight / srcWidth），destRatio =（destinationH / destinationW），resultWidth = destRatio> srcRatio？ destinationW：destinationH / srcRatio，resultHeight = destRatio> srcRatio？ destinationW * srcRatio：destinationH; var getPos = function（arg，res，dest）{var max = Math.max（res，dest），min = Math.min（res，dest）; switch（arg）{case'Min'：return 0; case'Mid'：return（max - min）/ 2; case'Max'：return max-min; default：return'invalid'; }}; var obj = {img：returnedImg，sx：0，sy：0，swidth：srcWidth，sheight：srcHeight，dx：getPos（args [0]，resultWidth，destinationW），dy：getPos（args [1]，resultHeight，destinationH ），dwidth：resultWidth，dheight：resultHeight}; if（obj [5] ==='invalid'|| obj [6] ==='invalid'）{return default_obj; } return obj; }; //我们应该切割较大的部分var aRSlice = function（args）{var resultWidth，resultHeight; var a = function（）{resultWidth = destinationW; resultHeight = srcHeight * destinationW / srcWidth; }; var b = function（）{resultWidth = srcWidth * destinationH / srcHeight; resultHeight = destinationH; }; if（destinationW> destinationH）{a（）; if（destinationH> resultHeight）{b（）; }} else if（destinationW === destinationH）{if（srcWidth> srcHeight）{b（）; } else {a（）; }} else {b（）; if（destinationW> resultWidth）{a（）; }} var getPos = function（arg，res，dest，src）{switch（arg）{case'Min'：return 0; case'Mid'：return（res - dest）/ 2 * src / res; case'Max'：return（res-dest）* src / res; default：return'invalid'; }}; var x = getPos（args [0]，resultWidth，destinationW，srcWidth）; var y = getPos（args [1]，resultHeight，destinationH，srcHeight）; var obj = {img：returnedImg，sx：x，sy：y，swidth：srcWidth - x，sheight：srcHeight - y，dx：0，dy：0，dwidth：resultWidth - （x *（resultWidth / srcWidth） Dheight：resultHeight - （y *（resultHeight / srcHeight）），}; if（obj [1] ==='invalid'|| obj [2] ==='invalid'）{return default_obj; } return obj; }; //检查传递的对象是否可以在canvas上绘制var returnedImg = source.nodeName ==='IMG'|| source.nodeName ==='VIDEO'|| source.nodeName ==='CANVAS'？ source：null; //如果一个无效的字符串或无设置为preserveAspectRatio，这应该被认为是xMidYMid满足var default_obj = aRMeet（['Mid'，'Mid']）;如果（！userString）{return default_obj; } else {var args = userString.trim（）。split（''），minMidMax = args [0] .replace（'x'，''）.split（'Y'）; switch（args [args.length - 1]）{casemeet：return aRMeet（minMidMax）; caseslice：return aRSlice（minMidMax）; default：return default_obj; }}}; // // Snippet code // _______________ var images = [new Image（），new Image（），new Image（）]; var img = images [0]; var selections = document.querySelectorAll（'select'）; var ctxL = outputLandscape.getContext（'2d'）; var ctxP = outputPortrait.getContext（'2d'）; var ctxS = outputSquare.getContext（'2d'）; var update = function（）{ctxL.clearRect（0，0，outputLandscape.width，outputLandscape.height）; ctxP.clearRect（0，0，outputPortrait.width，outputPortrait.height）; ctxS.clearRect（0，0，outputSquare.width，outputSquare.height）; var aspectRatioStr ='x'+选择[0] .value +'Y'+选择[1] .value +''+选择[2] .value; var p = preserveAspectRatio（img，outputPortrait，aspectRatioStr）; ctxP.drawImage（p.img，p.sx，p.sy，p.swidth，p.sheight，p.dx，p.dy，p.dwidth，p.dheight）; var l = preserveAspectRatio（img，outputLandscape，aspectRatioStr）; ctxL.drawImage（l.img，l.sx，l.sy，l.swidth，l.sheight，l.dx，l.dy，l.dwidth，l.dheight）; var s = preserveAspectRatio（img，outputSquare，aspectRatioStr）; ctxS.drawImage（s.img，s.sx，s.sy，s.swidth，s.sheight，s.dx，s.dy，s.dwidth，s.dheight）; svgImagePortrait.setAttribute（'preserveAspectRatio'，aspectRatioStr）; svgImageLandscape.setAttribute（'preserveAspectRatio'，aspectRatioStr）; svgImageSquare.setAttribute（'preserveAspectRatio'，aspectRatioStr）; }; for（var i = 0; i html，body，canvas {margin：0;显示：block; font-size：.9em;} svg，canvas {display：inline-block;} canvas {border：1px solid green;} svg {border：1px solid blue;}
x< select name =x> < option value =Min> Min< / option> < option value =Mid>中< / option> < option value =Max> Max< / option>< / select> Y< select name =Y> < option value =Min> Min< / option> < option value =Mid>中< / option> < option value =Max> Max< / option>< / select>< select name =slice_meet> < option value =slice> slice< / option> < option value =meet> meet< / option>< / select>图片格式：< select name =format> < option value =0> portrait< / option> < option value =1> landscape< / option> < option value =2> square< / option>< / select>< br>< canvas id =outputLandscapewidth =280height =200>< / canvas> ; svg width =280height =200viewBox =0 0 280 200> < image id =svgImageLandscapex =0y =0width =100％height =100％>< / image>< / svg>< br> =outputPortraitwidth =200height =280>< / canvas>< svg width =200height =280viewBox =0 0 200 280> < image id =svgImagePortraitx =0y =0width =100％height =100％>< / image>< / svg>< br& =outputSquarewidth =200height =200>< / canvas>< svg width =200height =200viewBox =0 0 200 200> < image id =svgImageSquarex =0y =0width =100％height =100％>< / image>< / svg> / pre>
Is there a workaround for implement SVG's preserveAspectRatio="xMinYMin slice" for drawImage() method in canvas?
解决方案
Ken's answer in the marked as duplicate answer indeed does the same operation as xMinYMin slice if you call it like drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height, 0, 0).
But for the ones who want the full implementation of the svg's preserveAspectRatio attribute, here is one :
It does return an object with sx,sy,sw,sh,dx,dy,dw,dh as requested by the drawImage() method.
var preserveAspectRatio = function(source, destination, userString) {
var srcWidth = source.width,
srcHeight = source.height,
destinationW = destination.width,
destinationH = destination.height;
// we should keep the whole source
var aRMeet = function(args) {
var srcRatio = (srcHeight / srcWidth),
destRatio = (destinationH / destinationW),
resultWidth = destRatio > srcRatio ? destinationW : destinationH / srcRatio,
resultHeight = destRatio > srcRatio ? destinationW * srcRatio : destinationH;
var getPos = function(arg, res, dest) {
var max = Math.max(res, dest),
min = Math.min(res, dest);
switch (arg) {
case 'Min': return 0;
case 'Mid': return (max - min) / 2;
case 'Max': return max - min;
default: return 'invalid';
}
};
var obj = {
img: returnedImg,
sx: 0,
sy: 0,
swidth: srcWidth,
sheight: srcHeight,
dx: getPos(args[0], resultWidth, destinationW),
dy: getPos(args[1], resultHeight, destinationH),
dwidth: resultWidth,
dheight: resultHeight
};
if (obj[5] === 'invalid' || obj[6] === 'invalid') {
return default_obj;
}
return obj;
};
// we should slice the larger part
var aRSlice = function(args) {
var resultWidth, resultHeight;
var a = function() {
resultWidth = destinationW;
resultHeight = srcHeight * destinationW / srcWidth;
};
var b = function() {
resultWidth = srcWidth * destinationH / srcHeight;
resultHeight = destinationH;
};
if (destinationW > destinationH) {
a();
if (destinationH > resultHeight) {
b();
}
} else if (destinationW === destinationH) {
if (srcWidth > srcHeight) {
b();
} else {
a();
}
} else {
b();
if (destinationW > resultWidth) {
a();
}
}
var getPos = function(arg, res, dest, src) {
switch (arg) {
case 'Min': return 0;
case 'Mid': return (res - dest) / 2 * src / res;
case 'Max': return (res - dest) * src / res;
default: return 'invalid';
}
};
var x = getPos(args[0], resultWidth, destinationW, srcWidth);
var y = getPos(args[1], resultHeight, destinationH, srcHeight);
var obj = {
img: returnedImg,
sx: x,
sy: y,
swidth: srcWidth - x,
sheight: srcHeight - y,
dx: 0,
dy: 0,
dwidth: resultWidth - (x * (resultWidth / srcWidth)),
dheight: resultHeight - (y * (resultHeight / srcHeight)),
};
if (obj[1] === 'invalid' || obj[2] === 'invalid') {
return default_obj;
}
return obj;
};
// check if the object passed was drawable over a canvas
var returnedImg = source.nodeName === 'IMG' || source.nodeName === 'VIDEO' || source.nodeName === 'CANVAS' ? source : null;
// if an invalid string or none is set as the preserveAspectRatio, this should be considered as "xMidYMid meet"
var default_obj = aRMeet(['Mid', 'Mid']);
if (!userString) {
return default_obj;
} else {
var args = userString.trim().split(' '),
minMidMax = args[0].replace('x', '').split('Y');
switch (args[args.length - 1]) {
case "meet": return aRMeet(minMidMax);
case "slice": return aRSlice(minMidMax);
default: return default_obj;
}
}
};
//
// Snippet code
//_______________
var images = [new Image(), new Image(), new Image()];
var img = images[0];
var selects = document.querySelectorAll('select');
var ctxL = outputLandscape.getContext('2d');
var ctxP = outputPortrait.getContext('2d');
var ctxS = outputSquare.getContext('2d');
var update = function() {
ctxL.clearRect(0, 0, outputLandscape.width, outputLandscape.height);
ctxP.clearRect(0, 0, outputPortrait.width, outputPortrait.height);
ctxS.clearRect(0, 0, outputSquare.width, outputSquare.height);
var aspectRatioStr = 'x' + selects[0].value + 'Y' + selects[1].value + ' ' + selects[2].value;
var p = preserveAspectRatio(img, outputPortrait, aspectRatioStr);
ctxP.drawImage(p.img, p.sx, p.sy, p.swidth, p.sheight, p.dx, p.dy, p.dwidth, p.dheight);
var l = preserveAspectRatio(img, outputLandscape, aspectRatioStr);
ctxL.drawImage(l.img, l.sx, l.sy, l.swidth, l.sheight, l.dx, l.dy, l.dwidth, l.dheight);
var s = preserveAspectRatio(img, outputSquare, aspectRatioStr);
ctxS.drawImage(s.img, s.sx, s.sy, s.swidth, s.sheight, s.dx, s.dy, s.dwidth, s.dheight);
svgImagePortrait.setAttribute('preserveAspectRatio', aspectRatioStr);
svgImageLandscape.setAttribute('preserveAspectRatio', aspectRatioStr);
svgImageSquare.setAttribute('preserveAspectRatio', aspectRatioStr);
};
for (var i = 0; i < selects.length - 1; i++) {
selects[i].onchange = update;
}
selects[3].onchange = function() {
img = images[+this.value];
update();
svgImagePortrait.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);
svgImageLandscape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);
svgImageSquare.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);
}
img.onload = function() {
svgImagePortrait.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);
svgImageLandscape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);
svgImageSquare.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);
update();
};
images[0].src = "http://lorempixel.com/100/200";
images[1].src = "http://lorempixel.com/200/100";
images[2].src = "http://lorempixel.com/200/200";
html,body,canvas {
margin: 0;
display: block;
font-size: .9em;
}
svg,canvas {
display: inline-block;
}
canvas {
border: 1px solid green;
}
svg {
border: 1px solid blue;
}
x
<select name="x">
<option value="Min">Min</option>
<option value="Mid">Mid</option>
<option value="Max">Max</option>
</select>
Y
<select name="Y">
<option value="Min">Min</option>
<option value="Mid">Mid</option>
<option value="Max">Max</option>
</select>
<select name="slice_meet">
<option value="slice">slice</option>
<option value="meet">meet</option>
</select>
image format :
<select name="format">
<option value="0">portrait</option>
<option value="1">landscape</option>
<option value="2">square</option>
</select>
<br>
<canvas id="outputLandscape" width="280" height="200"></canvas>
<svg width="280" height="200" viewBox="0 0 280 200">
<image id="svgImageLandscape" x="0" y="0" width="100%" height="100%"></image>
</svg>
<br>
<canvas id="outputPortrait" width="200" height="280"></canvas>
<svg width="200" height="280" viewBox="0 0 200 280">
<image id="svgImagePortrait" x="0" y="0" width="100%" height="100%"></image>
</svg>
<br>
<canvas id="outputSquare" width="200" height="200"></canvas>
<svg width="200" height="200" viewBox="0 0 200 200">
<image id="svgImageSquare" x="0" y="0" width="100%" height="100%"></image>
</svg>
这篇关于如何实现SVG的preserveAspectRatio =“xMinYMin slice”用于canvas drawImage方法。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
