新生網的個人圖片原本只能用類似巴哈勇者造型的模式來更換,但是看到程式碼以後...
先在瀏覽器console輸入以下程式碼以取得base64 dataURL
(圖片限定png)
var img = "你要的圖片url"; 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; } var image = new Image(); image.crossOrigin = ''; image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } |
再來進入新生網的更衣室,於瀏覽器的console輸入(dataURL自行替換為上一步驟取得的字串)
// 建立 file const dataURL = "base64 dataURL" const blobBin = atob(dataURL.split(',')[1]) const array = [] for (let i = 0; i < blobBin.length; i++) { array.push(blobBin.charCodeAt(i)) } const file = new Blob([new Uint8Array(array)], { type: 'image/png' }) // 將file 加至 formData const formData = new FormData() var id = $("body").attr("id") formData.append('image', file, id + ".png") //ajax 給後端 $.ajax({ url: "/personal/uploadavatar", type: "POST", data: formData, processData: false, contentType: false, success: function(res) { $.ajax({ url: "/personal/saveAvatar", type: "POST", data: { "hair": $("#p_hair").attr("src"), "face": $("#p_face").attr("src"), "clothes": $("#p_clothes").attr("src"), "shoes": $("#p_shoes").attr("src"), "skin": $("#p_skin").attr("src") }, datatype: "json", success: function(res) { //console.log("success") location.reload() }, error: function() { //console.log("failed") } }) }, error: function() { //console.log("upload failed") } }) |
來源:新生知訊網網站
沒意外的話網站會刷新,之後到新生網就會發現圖片改變了。