任何人都可以告诉我如何使用画布将图像调整为特定尺寸和曲线

Question

我有一个应用程序，用户将上传一个大图像，我的应用程序中还有另一个小图像。 我想使用画布调整大小和弯曲上传的图像。

我正在使用以下代码。 它正在弯曲图像，但无法调整图像大小。

var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "./images/mug_center.jpg"
imageObj2.src = dataImage;
var x1 = imageObj2.width / 2;
var x2 = imageObj2.width;
var y1 = 19; // curve depth
var y2 = 0;
var eb = (y2*x1*x1 - y1*x2*x2) / (x2*x1*x1 - x1*x2*x2);
var ea = (y1 - eb*x1) / (x1*x1);
// variable used for the loop
var currentYOffset;
for(var x = 0; x < imageObj2.width; x++) {
    // calculate the current offset
    currentYOffset = (ea * x * x) + eb * x;
    ctx.drawImage(imageObj2,x,0,1,imageObj2.height,x,currentYOffset,1,imageObj2.height);
}
var img = c.toDataURL("image/png");

Answer 1

这是一种方法：

• 在临时画布上绘制图像的弯曲版本。

• context.scale以缩放您的主画布

• context.drawImage(tempCanvas...)将弯曲的临时画布绘制到主画布。

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var imageObj2=new Image(); imageObj2.onload=start; imageObj2.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg"; function start(){ curvedScale(1.5) } function curvedScale(scale){ var tempCanvas=document.createElement('canvas'); var tctx=tempCanvas.getContext('2d'); tempCanvas.width=imageObj2.width*scale; tempCanvas.height=imageObj2.height*scale*3; var x1 = imageObj2.width / 2; var x2 = imageObj2.width; var y1 = 19; // curve depth var y2 = 0; var eb = (y2*x1*x1 - y1*x2*x2) / (x2*x1*x1 - x1*x2*x2); var ea = (y1 - eb*x1) / (x1*x1); // variable used for the loop var currentYOffset; var maxY=0; for(var x = 0; x < imageObj2.width; x++) { // calculate the current offset currentYOffset = (ea * x * x) + eb * x; if(currentYOffset>maxY){maxY=currentYOffset;} tctx.drawImage( imageObj2, x,0,1,imageObj2.height, x,currentYOffset,1,imageObj2.height ); } ctx.scale(scale,scale); ctx.drawImage(tempCanvas,0,0,tempCanvas.width,tempCanvas.height); ctx.scale(-scale,-scale); } 

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

 <h4>Canvas with 1.50X scale</h4> <canvas id="canvas" width=600 height=400></canvas> <h4>Original Image</h4> <img src='https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg'>