image 各種型態轉換(blob, dataURL, canvas) in JavaScript
blob 轉成 dataURL
blob 和 file 都可以使用,從 blob 讀取資料的唯一方式就是使用 FileReader。
function blobtoDataURL(blob, callback) {
var fr = new FileReader();
fr.onload = function(e) {
callback(e.target.result);
};
fr.readAsDataURL(blob);
}
blobtoDataURL(blob, function (dataURL){
console.log(dataURL);
});
dataURL 繪製到 canvas
新增一個 image 和 canvas,image src 屬性帶入 dataURL,然後用 canvas drawImage 繪製剛才新增的 image。之後就可以用 canvas 來幫 image 做很多事,例如裁切、縮放、打字、畫線條等等。
var img = new Image(),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
img.onload = function(){
ctx.drawImage(img);
};
img.src = dataURL;
canvas 轉成 dataURL
這個最簡單。
canvas.toDataURL(); // 預設會轉成 image/png
canvas.toDataURL('image/jpeg', 0.8); // 可指定 jpeg 品質
canvas 轉成 blob
目前只有 Firefox 支援,其他瀏覽器可使用 canvas-to-blob.js
canvas.toBlob(function(blob){
console.log(blob);
}, "image/jpeg", 0.8);
dataURL 轉成 blob
資源來源:stackoverflow
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}