加載圖像到canvas畫布中
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
var img =new Image();
img.onload =function(){
? context.drawImage(img,0,0,img.width,img.height);
}
img.src =YourImgUrl;
圖片轉(zhuǎn)成64base
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
圖片路徑轉(zhuǎn)換成base64
function convertImgToBase64(url,callback,outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img =new Image();
img.crossOrigin ='Anonymous';? ? //可解決跨域圖片不能轉(zhuǎn)換問題擂送，或者img.crossOrigin = '';
img.onload =function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat ||'image/png');
callback.call(this,dataURL);
canvas =null;
};
img.src = url;
}
圖片緩存
function cacheExternalImage(url){
var img =new Image(),? ?
src = url,? ?
cvs =document.createElement('canvas'),? ??
ctx = cvs.getContext('2d');? ?
img.crossOrigin ="Anonymous";? ??
img.onload =function(){
//ctx.drawImage( img, 0, 0 );
}? ??
img.src = src;
if( img.complete || img.complete ===undefined) {? ? ? ??
img.src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";? ? ? ??
img.src = src;? ??
}
return img;
}
