三维设计

具有一定的参考价值,HTML5 canvas实现移动端上传头像拖拽裁剪效果

  具有一定的参考价值,HTML5 canvas实现移动端上传头像拖拽裁剪效果
  这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,initial-scale=">,<divid="imgShow"></div>。
  这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  

本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全:
  <htmllang="en">
  <metacharset="UTF-8">
  <title>上传头像</title>
  <metaname="renderer"content="webkit">
  <metaname="viewport"content="width=device-width,initial-scale=">
  <divid="imgCrop"style="width:200px;height:200px;border:1pxsolidc;overflow:hidden;">
  
具有一定的参考价值,HTML5 canvas实现移动端上传头像拖拽裁剪效果
  <imgsrc="img/"alt="">
  <inputtype="file"ept="image/*"/>
  <buttonid="save">保存</button>
  <p>下面为剪切的图片:</p>
  <divid="imgShow"></div>
  JavaScript Code复制内容到剪贴板
  

以上就是本文的全部内容,希望对大家的学习有所帮助。
  <htmllang="en">,<metacharset="UTF-8">,<divid="imgCrop"style="width:200px;height:200px;border:1pxsolidc;overflow:hidden;">,<divid="imgShow"></div>。

发表评论

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