canvas压缩图片

最新推荐文章于 2024-05-16 11:12:50 发布

小熊猫壹贰号

最新推荐文章于 2024-05-16 11:12:50 发布

阅读量180

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/xin915/article/details/130525914

版权

      
      var me = this
      //获取image
      var image = new Image();
      //给image添加要获取的图片路径
      image.src = imgsrc;
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
        //image.onload 对图片进行缓存
      image.onload = function() {
        //创建canvas
        var canvas = document.createElement("canvas");
        //获取图片长宽
        let imgWidth = image.width;
        let imgHeight = image.height;
        //使用2d
        var context = canvas.getContext("2d");
        //进行压缩  context.drawImage(文件, 0, 0, 宽, 高)
        context.drawImage(image, 0, 0, 300, 300);
        //获取到转为base64的数据
        me.pictureUrlBmp  = canvas.toDataURL("image/png",0.01); //得到图片的base64编码数据
          console.log( me.pictureUrlBmp)
      };

使用image 获取到图片的值然后使用canvas转换压缩 drawImage（图片压缩）toDataURL图片转换的质量 0.01-1

注意事项

1.有一个问题我这个方法现在存在跨域问题

2.在无痕浏览器使用，在普通浏览器压缩图片特别小换成无痕就变大了感觉有缓存

大佬们知道了原因在评论区告诉我为啥