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