canvas 实现图片放大缩小、移动和截取（pc端、移动端）

canvas 实现图片放大缩小、移动和截取（pc端、移动端）

代码需求：

1、图片上传
2、图片放大、缩小、移动
3、截图生成新的图片

input[type=file] 、 canvas画布

canvas和input的基础我就不多说了，不懂得可以先自行学习一下基本操作
我参考了这个博主的文章，大家不会的可以先看看：
https://blog.csdn.net/cysear/article/details/89185239#comments_13156603

下面直接上代码

html

<div>
      <div class="custom_box">
          <p>此商品需要進行定制，需要添加圖片才能下單;上傳不大於15MB的JPEG或PNG格式檔案;</p>
          <div class="img">
              <img  id="img_preview">
          </div>
          <div class="clipContent">
              上传图片
              <input type="file" id="file">
          </div>
      </div>
      <div class="cover-wrap" id="content">	
          <div class="clipBgn" >
              <!-- 关闭按钮 -->
              <div class="closeB">
                  <div class="close"></div>
              </div>
              <div class="canvas_box">
                  <div class="can_wrap">
                      <canvas id="canvas" width="335" height="340"></canvas>
                  </div>
              </div>
              <div>注意：顯示內容是大致預覽</div>
              <div class="clipButton">
                  <div id="clipBtn">保存圖片</div>
              </div>
          </div>
      </div>
  </div>

css

body {
   
  margin: 0px;
  padding: 0;
}
.custom_box {
   
  margin: 10px 20px;
  border: 1px #D5D9D9 solid;
  border-radius: 6px;
  text-align: center;
  padding: 10px 20px;
  font-size: 12px;
}
.custom_box .img {
   
  height: 150px;
  margin: 10px 0;
}
.custom_box .img img {
   
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid;
}
.custom_box .clipContent {
   
  width: 100%;
  height: 36px;
  line-height: 36px;
  position: relative;
  border-radius: 4px;
  background-color: #b4282d;
  color: #FFFFFF;
  font-size: 14px;
}
.custom_box .clipContent input[type=file] {
   
  position: absolute;
  left: 0;
  top: 0;
  background-color: aqua;
  line-height: 36px;
  right: 0;
  width: 100%;
  opacity: 0;
}
.cover-wrap {
   
  position: fixed;
  width: 100%;
  text-align: center;
  min-height: 150px;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
.cover-wrap .clipBgn {
   
  margin-top: 40px;
  background-color: #fff;
  padding: 10px 0;
  font-size