js图片转base64, 支持网络地址 和 本地地址

 

js图片转base64, 支持网络地址 和 本地地址

在网上找了一个转的方法,如下:

// 转base64
    getBase64(img) {
      //传入图片路径,返回base64
      function getBase64Image(img, width, height) {
        //width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
      }
      var image = new Image();
      image.crossOrigin = "";
      image.src = img;
      var deferred = $.Deferred();
      if (img) {
        image.onload = function() {
          deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
        };
        return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
      }
    },

 

 

但是发现只能转 网络上的 地址, 如果是 本地的地址是 无法进行转换的, 所以 又重新找了一个方法 如下:

 

 // let url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=935292084,2640874667&fm=27&gp=0.jpg'
      let url = "../../../static/images/guiji.png"
      function getUrlBase64(url, callback) {
        var canvas = document.createElement("canvas");   //创建canvas DOM元素
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
            canvas.height = 60; //指定画板的高度,自定义
            canvas.width = 85; //指定画板的宽度,自定义
            ctx.drawImage(img, 0, 0, 60, 85); //参数可自定义
            var dataURL = canvas.toDataURL("image/");
            callback.call(this, dataURL); //回掉函数获取Base64编码
            canvas = null;
        };
      }

      getUrlBase64(url, function (base64) {
          console.log('base64编码值',base64);//base64编码值
      });

有些会出现跨域的问题,当时有遇到, 问题原因已找出, 见另外一篇 https://blog.csdn.net/qq_42341025/article/details/86676966

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值