可以告诉我如何使用画布将图像调整为特定大小和曲线

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...)将弯曲的临时画布绘制到主画布上。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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'>

＆＃13;

＆＃13;

＆＃13;