We usually modify the picture through the deformation command in PS to make it fit on the cup, but how do we make it with canvas?Examples in PS

I met the need is to complete a real-time rendering of the cup preview, you need to achieve this bending effect, first on the code, and then explain the principle

<head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas ID ="canvas"></canvas> <p> Please select an image to draw on the cup </p> <input Type ='file' id='change' /> </body> <script SRC ='js/ jquery-31.1.min.js '></script> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = start; var productImg = new Image(); productImg.onload = function() { var iw = productImg.width; var ih = productImg.height; canvas.width = iw * 2 / 3; canvas.height = ih * 2 / 3; ctx.drawImage(productImg, 0, 0, productImg.width * 2 / 3, productImg.height * 2 / 3); }; productImg.src = "img/cola.jpeg"; $(function() { $('#change').on('change', function(ev) { var reader = new FileReader(); var file = this.files[0]; reader.onload = function(ev) { self.option.sizeMax, function(dataURL, blob) { img.src = ev.target.result } reader.readAsDataURL(file); }) }) function start() { var iw = img.width; var ih = img.height; var xOffset = 190, yOffset = 212; Var a = 80.0; Var b = 15.0; var scaleFactor = iw / (2 * a); for(var X = 0; X < 2 * a; X++) { var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation for(var Y = 0; Y < 194 + y * 2; Y++) { var _scaleFactor = ih / (194 + y * 2); var scaleFactor = iw / (2 * a - Y / 5); if(Y < X * 10 && Y < -10 * X + 2 * a * 10) { //Y<x*10 ctx.drawImage(img, (X - Y / 10) * scaleFactor , Y * _scaleFactor, 1, 1, X + xOffset, y + yOffset + Y, 1, 1); Ctx.beginpath (); ctx.moveTo(xOffset, yOffset); ctx.lineTo(xOffset + 226 / 10, yOffset + 226); ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.moveTo(xOffset + 2 * a + 1, yOffset); ctx.lineTo(xOffset + 2 * a + 1 - 226 / 10, yOffset + 226); ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.moveTo(xOffset, yOffset + 1); ctx.bezierCurveTo(xOffset + a / 2 - 10, yOffset + 20, xOffset + a * 3 / 2 + 15, yOffset + 20, xOffset + 2 * a, yOffset + 1); CTX. StrokeStyle = 'RGB (230230230); ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.moveTo(xOffset + 226 / 10, yOffset+226-1); ctx.bezierCurveTo(xOffset + 226 / 10 + a / 2 -5, yOffset+226 + 18, xOffset + 226 / 10 + a * 3 / 2 - 35, yOffset+226 + 18, xOffset + 226 / 10 + a*3/2-3, yOffset+226 -1); ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.stroke(); } </script>Copy the code

There’s a distinct feeling of underarc

To achieve this radian you first have to do it in two steps

The main idea is to first draw the outline of the cup, and then attach a picture of the proportional position. First draw a shape with a top and bottom semi-ellipse:

 ​

Looking at the above image, we can see that we just need to cut the original image into a vertical shape and draw the shape with the upper and lower semi-ellipses. Paste the corresponding image in the position. Now let’s see how to draw the shape with the upper and lower semi-circles:

​

Look at the calculation of the top ellipse, and the following ellipse, the next ellipse is slightly simpler, let’s see how it relates to the top ellipse:

​

Now that you have a general idea of how an ellipse is cut, let’s look at how an ellipse + hypotenuse is cut. This is a bit more complicated than just an ellipse, and will cut both perpendiculars:

 ​

Now let’s look at the equations of the two lines, one is y=10x, the other is y=20a-10*x;

​

So far, we have completed all image drawing. The application scene of this code is cylinder, but it is not flexible enough for special perspective relationship. If we can directly resolve the deformation command in PSD, it will be more flexible by replacing the smart layer

​

I recently found a website that does just that, and I’d like to share it with you, if you’re interested

# Program to replace PSD smart layer can realize personalized customized effect picture preview service, make a GOOD PSD template, directly replace smart layer, more flexible operation