图片 视频和Canvas的相互转换

drawImage方法的参数数量只能是3，5，9

1、参数数量为3时
img、x、y为必填参数
x、y为在canvas画布上的起始坐标点，默认使用整个canvas画布

2、参数数量为5时
参数依次为img、x、y、width、height
width和height为要绘制的canvas画布的长宽

3、参数数量为9时
所有参数都使用
所绘制的图像源的起始坐标、长宽
 

一、图片转 Canvas&base64

//一般宽高不会定死而是在js里赋值 也可以通过样式设置
<canvas id="myCanvas" width="500" height="300">您的浏览器不支持Canvas!</canvas>

var canvas = document.getElementById("myCanvas");
imageToCanvas(canvas,"1.jpg");
 
function imageToCanvas(canvas,url) {
//可以通过new一个img或者创建一个img
    var img = new Image();  // let img=document.createElement('img')
    img.src = url;
	img.onload = function(){
        canvas.width=hi.width
		canvas.height=hi.height
	    canvas.getContext("2d").drawImage(img,0,0， canvas.width，canvas.height); //绘图完成
  //还可以转为base64形式 *最好不要转为png格式 因为字符过多浏览器地址栏放不下会导致部分图片不显示
    const base=canvas.toDataURL('image/jpeg')
   //这个base可以直接赋值给img.url显示 
 
	}
}
//FileReader也能转base64
 var reader = new FileReader();
        reader.readAsDataURL(img );
         reader.onload = function () {
          console.log( reader.result ) 
        }

多个图片批量转canvas

html

<canvas v-for="(item,index) in i" :key="index"
//id控制
 :id="'canvas'+index" width="500" height="500">
您的浏览器不支持Canvas!{{item}}
</canvas>

data

  i: ['https://vkceyugu-backup.cdn.bspapp.com/VKCEYUGU-bdbeaf13-95b3-48c4-a13b-687691a23e5f/7c0c7e24-47c0-4cf2-b609-1a73cda9490b.jpg',
 
 'https://vkceyugu-backup.cdn.bspapp.com/VKCEYUGU-bdbeaf13-95b3-48c4-a13b-687691a23e5f/94d3e05c-6715-434f-a23f-e7da5da5fa3d.PNG'
],

js

async mounted() {
    for(var i = 0; i < this.i.length; i++){ 
//获取id
    let canvas = document.getElementById(`canvas${i}`);
    imageToCanvas(canvas, this.i[i]);
    function imageToCanvas(canvas, url) {
      let img = new Image();
      img.src = url;
      let ctx = canvas.getContext("2d");
      img.onload = function () {
        console.log('图片加载成功');
          //最后2参数为图片大小
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
    }}

动态控制canvas图片的大小和解决模糊问题

在canvas上定义class  设置宽高初始值

//html
<canvas ref="canva" class="can" id="myCanvas" style="background:transparent;">您的浏览器不支持Canvas!</canvas>
 
//css
  .can {
    width: 90%;
    margin-top: 20px;
    margin-left: 5%;
    height: v-bind('actHeight.height');
  }
 

 为了使绘制出的图片长宽比例不变 我在html里定义一个img元素 用v-if控制它的存在与销毁 设置它的宽度为我想要的canvas图片的宽度 之后在Mount里获取img的高度 这个高度是图片保持正常比例的高度 

//html
 <img class="pic" v-if="actHeight.height=='100px'" ref="Vimg" style=" z-index: -100;" :src="picAddress">
 
//css
 .pic {
     width: 90%;
    position: absolute;
    left: 0;
    z-index: -100;
    height: auto;
  }
 

   在js里可以通过放大一倍canvas大小，但是通过css保持canvas大小不变，然后再绘制进canvas中，这样在canvas放大一倍的情况下绘制进去图片，然后通过css缩小canvas到原来大小达到目的。

    let actHeight = ref({ height: '100px' })
    const Vimg = ref()
    const canva = ref()
 
    onMounted(() => {
      let canvas = document.getElementById("myCanvas");
      imageToCanvas(canvas, picAddress.value);
    })
 
 
    const imageToCanvas = function (canvas, url) {
      let img = new Image();
      img.src = url;
      img.onload = function () {
        let ctx = canvas.getContext("2d");
//获取图片正常比例的宽高后x2 赋值给canvas的宽高 再绘图 
通过css控制canvas恢复到我们想要大小达到清晰绘制目的。
        canvas.width = Vimg.value.clientWidth * 2
        canvas.height = Vimg.value.clientHeight * 2
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        actHeight.value.height = Vimg.value.clientHeight + 'px'
 
      }
    }

把视频的当前帧克隆到Canvas：
（每20毫秒，代码就会绘制视频视频的当前帧）
  示例：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {
    var i=window.setInterval(function() {
        ctx.drawImage(v,0,0,270,135);
    },20);},false);
v.addEventListener('pause',function() {
    window.clearInterval(i);
},false);
v.addEventListener('ended',function() {
    clearInterval(i);
},false);

Canvas转图片
function canvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");  //把canvas转换成base64图像保存
    return image;
}