scratch3.0发布作品生成封面图
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