scratch3.0发布作品生成封面图

• canvas生成图片
• 正确的姿势

canvas生成图片

let myCanvas = document.getElementById('stage-canvers'); 
		let image = myCanvas.toDataURL("image/png");
           

我最初是这样写的，只有偶尔情况下能生成图片，其他时候都是黑色的。找了很久质料，偶尔在一个论坛上看到了解决方案。

正确的姿势

let render = this.props.vm.renderer
		render.draw()
        let myCanvas = document.getElementById('stage-canvers'); 
        let image = myCanvas.toDataURL("image/png");
        
        //TODO 把base64图片上传到七牛
        qiniuToken().then(res => {
            let _t = res.content.QINIU_TOKEN
            putb64(image, _t, res => {
                coverData = res
            })
        })
        //这是一个简单的上传方法
        export const putb64 =function(image,_t,cb){
		  var pic = image.split('base64,')[1];
		  var url = Qiniu_UploadUrl+'/putb64/-1';
		  var xhr = new XMLHttpRequest();
		  xhr.onreadystatechange=function(){
		    if (xhr.readyState==4){
		      let _res = JSON.parse(xhr.response)
		      if(cb){
		        cb(`${quniuUrl}/${_res.key}`)
		      }
		      // document.getElementById("myDiv").innerHTML=xhr.responseText;
		    }
		  }
		  xhr.open("POST", url, true);
		  xhr.setRequestHeader("Content-Type", "application/octet-stream");
		  xhr.setRequestHeader("Authorization", `UpToken ${_t}`);
		  xhr.send(pic);
		}

           

ok到这里就全部搞定。

感谢：https://blog.csdn.net/weiwoyonzhe/article/details/86603217