Canvas的基本使用和总结

创建 Canvas 画布

改变画布大小

有三种方式

• HTML 设置 width、height；（推荐）
• CSS 设置 width、height；
• JS 动态设置 width、height。（推荐）

HTML 属性设置 width、height

<canvas id="canvas" width="400" height="400">

JS 属性设置 width、height

<template>
    <div>
        <canvas id="canvas"></canvas>
    </div>
</template>    
    
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var cx = canvas.width = 400;
    var cy = canvas.height = 400;
</script>

获取 Canvas 对象

<template>
  <div>
      <canvas id="canvas" width="400" height="400"></canvas>
  </div>
</template>
 
<script>
export default {
  mounted () {
    //第一步获取 Canvas 对象
    var canvas = document.getElementById("canvas");
    //第二步要做的就是获取到 Canvas 的上下文环境
    var context = canvas.getContext("2d");
  }
};
</script>

绘制

图像绘制

Canvas 还有一个经常用的方法是drawImage()。

方法	描述
drawImage()	向画布上绘制图像、画布或视频

• img：规定要使用的图像、画布或视频
• sx：可选。开始剪切的 x 坐标位置
• sy：可选。开始剪切的 y 坐标位置
• swidth：可选。被剪切图像的宽度(注意要和后面的width相同,不然图片会变形)
• sheight：可选。被剪切图像的高度(注意要和后面的height相同,不然图片会变形)
• x：在画布上放置图像的 x 坐标位置
• y：在画布上放置图像的 y 坐标位置
• width：可选。要使用的图像的宽度（伸展或缩小图像）
• height：可选。要使用的图像的高度（伸展或缩小图像）

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

截图功能

通过获取坐标完成截图

通过vue-cropperjs获取到截图区域的坐标

this.$refs.cropper.getData 获取截图区的数据
{
    x: 5.000000000000003,//x坐标
    y: 400.82499999999993,//y坐标
     460.4,//截图区宽
    height: 111.3500000000001,//截图区高
    rotate: 0,
    scaleX: 1,
    scaleY: 1
};
this.$refs.cropper.getImageData 获取图片的数据
{
    naturalWidth: 583,//自然宽度
    naturalHeight: 842,//自然高度
    aspectRatio: 0.6923990498812351,//宽高比
     344.1223277909738,//缩放后的宽
    height: 497,//缩放后的高
    left: 2.842170943040401e-14,
    top: 0
};

在vue中进行截图

<template>
  <div>
    <canvas style="background:#ccc" ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: require("../assets/img/6366484456315909139794539.png")
    };
  },
  mounted() {
    let canvas = this.$refs.canvas;
    let ctx = canvas.getContext("2d");
    canvas.width = 460;//裁剪区宽
    canvas.height = 111;//裁剪区高
    let img = new Image();
      
    img.onload = function() {
                   ↓图像  x  y    截图宽高        显示区域宽高 
      ctx.drawImage(img, 5, 401, 460, 111, 0, 0, 460, 111);
      //将canvas转为图片追加到网页中  
      var dataImg = new Image();
      dataImg.src = canvas.toDataURL("image/png",1);//默认格式为image/png 图片质量默认0.92
      app.appendChild(dataImg); 
    };
      
    img.src = this.src; //如果是外链图片 会导致跨域 
  }
};
</script>