html2canvas 图片不显示问题

最近做了一个生成图片并且保存到本地的需求
h5生成图片 用HTML2canvas 但是出现了一个问题 刚开始的是有图片,然后在生成图片的一瞬间 啊·哦 图片没有了呢 很烦恼,原来是本地图片能正常显示,从服务器请求回来的图片不能展示,哦哦哦,是因为图片跨域了哦
1.让服务器设置跨域
但是我的图片是在七牛云上的 所以还是靠自己吧
2.请求回来的图片转成base64 就不存在跨域了

 let sessionImgUrl = sessionStorage.getItem('userHeadImgUrl')
        if(sessionImgUrl){
            var url = sessionImgUrl;//imgurl 就是你的图片路径  
            let userImg = ''
            that.getBase64(url)
                .then(function(base64){
                    that.setState({
                        userHeadImgUrl:base64
                    },()=>{
                        that.drawCanvas()
                    })
                },function(err){
                      console.log(err);//打印异常信息
                });     
        }else{
            that.setState({
                userHeadImgUrl:Images.hemai_header_icon
            },()=>{
                that.drawCanvas()
            })
        }
    }
    getBase64(img){
        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']
        }
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值