http图片转base64

最新推荐文章于 2024-03-05 21:45:00 发布

余白x

最新推荐文章于 2024-03-05 21:45:00 发布

阅读量1.6k

点赞数

分类专栏： base64 文章标签： Base64编码图片转换 canvas 跨域 JPEG

本文链接：https://blog.csdn.net/weixin_54682740/article/details/120622175

版权

base64 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

imageUrlToBase64(img) {
  //一定要设置为let，不然图片不显示
  let image = new Image();
  let dataURL = ''
  //解决跨域问题
  image.setAttribute("crossOrigin", "anonymous");
  let imageUrl = img;
  image.src = imageUrl;
  //image.onload为异步加载
  image.onload = () => {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let quality = 0.8;
    //这里的dataurl就是base64类型
    dataURL = canvas.toDataURL("image/jpeg", quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
    console.log(dataURL);//dataURL就是转好的base64编码
  }
}