Canvasは七牛雲に画像を保存します
3836 ワード
最近、先端で画像をスライスして七牛雲にアップロードするプロジェクトをしています.
技術的要点 canvas.toBlob(blob=>{});//canvasはバイナリファイル に保存できます. formData.append('file', blob, 'filename');//FormDataにバイナリファイルを追加する ajax.send(formData);//バックエンド処理 へのデータのアップロード
コード実装
現在、七牛クラウドが提供するJSDKがblobをクラウドにアップロードすることをサポートしているのを見ていないので、ここではajax post formDataが七牛クラウドにアップロードされるときにcontent-typeを設定しないで、ブラウザに自分で処理させることを実現しました.
技術的要点
コード実装
現在、七牛クラウドが提供するJSDKがblobをクラウドにアップロードすることをサポートしているのを見ていないので、ここではajax post formDataが七牛クラウドにアップロードされるときにcontent-typeを設定しないで、ブラウザに自分で処理させることを実現しました.
class Qiniu {
constructor(options = {}) {
this._options = {...options};
}
ajax(url = '', opt = {}) {
const options = {method: 'GET', async: true, dataType: 'JSON', ...opt};
return new Promise((resolve, reject) => {
const ajax = this.createAjax();
if (ajax) {
const _async = typeof options.async === 'boolean' ? options.async : true;
ajax.open(options.method || 'GET', url, _async);
if (options.headers) {
Object.keys(options.headers).forEach(key => {
ajax.setRequestHeader(key, options.headers[key]);
});
}
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status >= 200 && ajax.status <= 400) {
let res = ajax.responseText;
if (options.dataType && options.dataType.toUpperCase() === 'JSON') {
res = JSON.parse(res);
}
resolve(res, ajax.response);
} else {
reject(new Error(' :' + ajax.status))
}
}
};
ajax.send(options.data);
} else {
reject(new Error(' Ajax ！'));
}
});
}
createAjax() {
let xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
getToken() {
if (this._options.token) {
return Promise.resolve(this._options.token);
} else {
if (typeof this._options.getToken === 'function') {
const t = this._options.getToken();
if (t && typeof t.then === 'function') {
return t.then(token => {
this._options.token = token;
return token;
})
} else if (typeof t === 'string') {
this._options.token = t;
return Promise.resolve(t);
} else {
return Promise.reject(new Error('options.getToken Promise string token'));
}
} else if (typeof this._options.getTokenUrl === 'string') {
return this.ajax(this._options.getTokenUrl, {
headers: {
authorization: this._options.authorization
}
}).then(res => {
this._options.token = res.uptoken;
return this._options.token;
}).catch(ex => {
throw new Error(' uptoken :' + ex.message);
});
} else {
return Promise.reject(new Error(' token'));
}
}
}
upload(file, filename, key) {
return this.getToken().then(token => {
const formData = new FormData();
formData.append('key', key || filename);
formData.append('token', token);
formData.append('file', file, filename);
return formData;
}).then(data => {
// content-type,
return this.ajax('http://upload.qiniu.com/', {
method: 'POST',
data,
});
});
}
}
canvas.toBlob(blob => {
const filename = Date.now() + Math.random() + '.png';
const qiniu = new Qiniu({getTokenUrl:' token '});
qiniu.upload(blob, filename);
}, 'image/png');