將遠程image圖片轉base64編碼

最近在開發微信網頁項目上遇到一個小問題,canvas生成海報需要用到一張圖片,而這張圖片剛好是別的域名。爲此

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 // return dataURL.replace("data:image/png;base64,", ""); 
}
function myBase64() { 
	var img = document.createElement('img');//創建新節點
	var inImgUrl=$('#inImg').attr('src') ;//獲取遠程圖片url
	var inImgw=$('#inImg').width();//獲取當前遠程圖片在當前屏幕上的寬帶
	var inImgh=$('#inImg').height();//獲取當前遠程圖片在當前屏幕上的高度
	img.src = inImgUrl; //把圖片url賦值給新節點
	img.setAttribute('width',inImgw);//設置新圖片節點的寬
	img.setAttribute('height',inImgh);//設置新圖片節點的高
	img.onload =function() { 
		var newImg = getBase64Image(img); //編譯base64
		//alert(newImg);
		img.src = newImg; 
	} 
	$('#posterCanvasHeadimg').html(img); //插入新建的img
}
myBase64();
爲此圖片已經轉成base64了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章