将以矩形（由用户上传）开头的图像弯曲，最好使用Canvas或JS [英] Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS

问题描述

我正在尝试创建一个网站来弯曲用户上传的图片，然后允许用户保存新图片。我无法弄清楚如何曲线图像，如下面的链接所示。我可以在Canvas中将曲线形状创建为纯色，但不能与图像一起使用。

I'm trying to create a site that curves an image uploaded by a user, and then allows the user to save the new image. I'm having trouble figuring out how to curve the image as shown in the link below. I can create the curved shape as a solid color in Canvas, but not with an image.

http://i53.tinypic.com/ 2gule04.jpg

推荐答案

我试过这样。

>

我有一个宽度为300和高度为227的源图像。我要把这个图像弯曲15像素。因此创建一个具有相同宽度和高度的画布= imageWidth + 15像素。即。 227 + 15 = 242。

I have a source image having width 300 and height 227. And I am going to bend this image 15 pixel down. So create a canvas with same width and height = imageWidth + 15 px. ie. 227+15 = 242.

HTML ：

<img id="source" src="rhino.jpg">
<canvas id="canvas" width="300" height="242" ></canvas>

Javascript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('source');

var x1 = img.width / 2;
var x2 = img.width;
var y1 = 15; // 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 < img.width; x++) {

    // calculate the current offset
    currentYOffset = (ea * x * x) + eb * x;

    ctx.drawImage(img,x,0,1,img.height,x,currentYOffset,1,img.height);
}

这篇关于将以矩形（由用户上传）开头的图像弯曲，最好使用Canvas或JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！