html5 canvas 实现图片合成

前段时间在公司做了个服装diy的项目,用到了html5 canvas的图片处理功能,项目的实现方法是先用3d建模,把渲染的服装拆分成碎片,在用js、jquery、html5等技术对服装的碎片组合成一张图片,下面是项目中用到html5canvas图片合成的一个小案例分享给大家

演示地址:demo

21 Responses to “ html5 canvas 实现图片合成 ”

  1. 旭旭说道:

    求源码看看

  2. […] 移动试衣间:http://www.loveqiao.com/dom/works/fitting/ Canvas图片合成:http://www.loveqiao.com/archives/53/ Canvas涂鸦画板:http://www.loveqiao.cn/dom/html5css3/canvas.html […]

  3. 27说道:

    我使用的是网上图片 应该怎么改?

  4. omyrobin说道:

    求源码看啊 嘿嘿…..

  5. 陈小予说道:

    网站做的好棒哦

  6. 小咪说道:

    我想把四张图片按顺序排合成一张图(例如上面是第1张跟第2张,下面是第3张跟第4张)我需要怎么改代码?

    • 前端老徐说道:

      ctx.drawImage(img,0,0,290,290);这个方法的 第一个0是x坐标,第二个0是y坐标,你只需要创建一个变量按照你图片定义的尺寸累加修改y坐标的值即可

  7. 墨流漾说道:

    请问,点进demo后点合成有用,但是把代码复制下来,在本地建了个网页代码粘上去,点合成后没效果了,这是什么原因。两次用的同一个浏览器

  8. 落樱冥说道:

    请问老徐,你的这个工具可以在两张照片合成的时候把两张照片的色调调成一致的吗

  9. 徐哥你好 我是你的fans 膜拜前端这么牛掰,有个问题请教一下,图片合并失真怎么处理?

  10. 今起说道:

    徐哥你好!请问当diy的图片超出要怎么处理;比如有图1和图2两张图片,2张合成,图2总会超出一部分,这种情况要怎么处理

  11. vampire说道:

    徐哥 你好,在移动端做图片合成,出现了背景图片只获取到300*150px,这个情况有什么办法解决

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>