html 根据js的值显示图片,js 操作图片对象，获取图片数据

//参考案例/UI2/demo/picCut/mainActivity.w

var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas");

var data = result.toDataURL();

2.base64 编码转二进制对象

Model.prototype.dataURLtoBlob = function(dataurl) {

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], {type:mime});

}

//调用

var blob = this.dataURLtoBlob(data);

3.二进制对象转base64 编码

Model.prototype.readBlobAsDataURL = function(blob, callback) {

var a = new FileReader();

a.onload = function(e) {

callback(e.target.result);

};

a.readAsDataURL(blob);

}

//调用

this.readBlobAsDataURL(blob, function (dataurl){

console.log(dataurl);

});

4.base64图片对象，画出图片：

Model.prototype.base64ForCanvas = function(data) {

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img = new Image();

img.onload = function(){

ctx.drawImage(img,0,0,200,200);

};

img.src = data;

}

//调用传base64数据

this.base64ForCanvas(data);

5.二进制或图片文件对象，页面显示

//Blob对象得到base64格式的url，再参考 base64图片数据绘制到canvas

Model.prototype.blobForCanvas = function(blob) {

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

this.readBlobAsDataURL(blob, function (dataurl){

var img = new Image();

img.onload = function(){

ctx.drawImage(img,0,0,200,200);

};

img.src = dataurl;

});

}

//调用传二进制数据

this.base64ForCanvas(blob);

6.imageData 转 blob

//imageData 转 blob

Model.prototype.button3Click = function(event){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var imageData = ctx.getImageData(0,0,200,200);

var data = imageData.data;

var blob = new Blob([data]);

};

7.Blob to ArrayBuffer

//Blob to ArrayBuffer

var reader = new FileReader();

reader.onload = function(e) {

callback(e.target.result);

};

reader.readAsArrayBuffer(blob);