最近在開發微信網頁項目上遇到一個小問題,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了