在HTML5 / JavaScript中围绕圆柱形对象包裹图像 [英] Wrap an image around a cylindrical object in HTML5 / JavaScript

问题描述

我想在Web应用程序中围绕圆柱形对象（如杯子）包装图像，如此

这可能是一个基本图像（例如一个杯子的jpeg图像），其中包含用户上传图像的转换图像。

在

  function canvas1（）{var canvas = document。的getElementById（ canvas1）; var ctx = canvas.getContext（2d）; var productImg = new Image（）; productImg.onload = function（）{var iw = productImg.width; var ih = productImg.height;的console.log（ 高度）; canvas.width = iw; canvas.height = ih; ctx.drawImage（productImg，0,0，productImg.width，productImg.height，0,0，iw，ih）; loadUpperIMage（）}; productImg.src =http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpgfunction loadUpperIMage（）{var img = new Image（）; img.src =http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpgimg.onload = function（）{var iw = img.width; var ih = img.height; var xOffset = 102，// left padding yOffset = 110; // top padding // alert（ih）var a = 75.0; //图像宽度var b = 10; // round ness var scaleFactor = iw /（4 * a）; //为（var X = 0; X< iw; X + = 1）绘制垂直切片{var y = b / a * Math.sqrt（a * a  - （X  -  a）*（X  -  a）） ; //省略号方程ctx.drawImage（img，X * scaleFactor，0，iw / 9，ih，X + xOffset，y + yOffset，1,174）; }}; function canvas2（）{var canvas = document.getElementById（canvas2）; var ctx = canvas.getContext（2d）; var productImg = new Image（）; productImg.onload = function（）{var iw = productImg.width; var ih = productImg.height;的console.log（ 高度）; canvas.width = iw; canvas.height = ih; ctx.drawImage（productImg，0,0，productImg.width，productImg.height，0,0，iw，ih）; loadUpperIMage（）}; productImg.src =http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpgfunction loadUpperIMage（）{var img = new Image（）; img.src =http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpgimg.onload = function（）{var iw = img.width; var ih = img.height; // alert（iw）var xOffset = 101，// left padding yOffset = 110; // top padding var a = 75.0; //图像宽度var b = 10; // round ness var scaleFactor = iw /（4 * a）; //为（var X = 0; X< iw; X + = 1）绘制垂直切片{var y = b / a * Math.sqrt（a * a  - （X  -  a）*（X  -  a）） ; //省略号方程ctx.drawImage（img，X * scaleFactor，0，iw / 3，ih，X + xOffset，y + yOffset，1,174）; }}; function canvas3（）{var canvas = document.getElementById（canvas3）; var ctx = canvas.getContext（2d）; var productImg = new Image（）; productImg.onload = function（）{var iw = productImg.width; var ih = productImg.height; canvas.width = iw; canvas.height = ih; ctx.drawImage（productImg，0,0，productImg.width，productImg.height，0,0，iw，ih）; loadUpperIMage（）}; productImg.src =http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpgfunction loadUpperIMage（）{var img = new Image（）; img.src =http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpgimg.onload = function（）{var iw = img.width; var ih = img.height; // alert（iw）var xOffset = 102，// left padding yOffset = 110; // top padding var a = 75.0; //图像宽度var b = 10; // round ness var scaleFactor = iw /（3 * a）; //为（var X = 0; X< iw; X + = 1）绘制垂直切片{var y = b / a * Math.sqrt（a * a  - （X  -  a）*（X  -  a）） ; //省略号方程ctx.drawImage（img，X * scaleFactor，0，iw / 1.5，ih，X + xOffset，y + yOffset，1,174）; }}; setTimeout（function（）{canvas1（）}，1000）; setTimeout（function（）{canvas2（）}，2000）; setTimeout（function（）{canvas3（）}，3000）;  

 <！DOCTYPE html>< html>< head> < script data-require =jquery @ *data-semver =2.1.4src =http://code.jquery.com/jquery-2.1.4.min.js>< / script> ; < link rel =stylesheethref =style.css/> < script src =script.js>< / script>< / head>< body> < DIV> < canvas id =canvas1>< / canvas> < / DIV> < DIV> < canvas id =canvas2>< / canvas> < / DIV> < DIV> < canvas id =canvas3>< / canvas> < / div>< / body>< / html>  

< blockquote>

注意：只需使用这些点进行校准

  var scaleFactor = iw /（4 * a）; //编辑4 * a到6 * a 
 
 ctx.drawImage（img，X * scaleFactor，0，iw / 3，ih，X + xOffset，y + yOffset，1,174）; //编辑iw / 3 TO iw / 4 
  

I want to wrap an image around a cylindrical object like mugs in a web app, like so

This will likely be a base image (e.g. a jpeg image of a mug) containing a transformed image of a user uploaded image.

There seems to be a lot of resources on this in PhotoShop. However, this is of course not appropriate for web, mobile or server environments.

I also know this is possible, as a number of sites already do this extremely well. For example, Vista Print (see image), Asda Photos (and loads more on the internet by just searching personalised mugs on Google), using what seems to be just HTML5.

However, bizarley I cannot seem to find any answers for a Web App. There's a lot of questions on this in StackOverflow that are all unanswered like: Wrap an image around a cylinder, wrap image around a cylindrical cup using html 5 canvas and javascript, How overlay image over a cup using html5 canvas and many many more!

Therefore can someone please finally provide an answer to this question.

解决方案

function canvas1() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;
    console.log("height");

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };

  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpg"


  function loadUpperIMage() {
    var img = new Image();


    img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"
    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      var xOffset = 102, //left padding
        yOffset = 110; //top padding

      //alert(ih)
      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (4 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174);
      }
    };
  }

};

function canvas2() {

  var canvas = document.getElementById("canvas2");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;
    console.log("height");

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };


  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpg"

  function loadUpperIMage() {
    var img = new Image();

    img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"

    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      // alert(iw)

      var xOffset = 101, //left padding
        yOffset = 110; //top padding

      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (4 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 174);

      }
    };
  }

};

function canvas3() {

  var canvas = document.getElementById("canvas3");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };

  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg"


  function loadUpperIMage() {
    var img = new Image();

    img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"

    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      //alert(iw)

      var xOffset = 102, //left padding
        yOffset = 110; //top padding

      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (3 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174);
      }
    };
  }

};

setTimeout(function() {
  canvas1()
}, 1000);
setTimeout(function() {
  canvas2()
}, 2000);
setTimeout(function() {
  canvas3()
}, 3000);

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link rel="stylesheet" href="style.css" />

  <script src="script.js"></script>
</head>

<body>

  <div>
    <canvas id="canvas1"></canvas>
  </div>

  <div>
    <canvas id="canvas2"></canvas>
  </div>

  <div>
    <canvas id="canvas3"></canvas>
  </div>


</body>

</html>

Note : Just Use these points to calibrate

var scaleFactor = iw / (4*a); //EDIT 4*a TO 6*a

ctx.drawImage(img, X * scaleFactor, 0, iw/3, ih, X + xOffset, y + yOffset, 1, 174); //EDIT  iw/3 TO iw/4

这篇关于在HTML5 / JavaScript中围绕圆柱形对象包裹图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！