iT邦幫忙

0

用canvas為圖片加上浮水印之後,上傳imgur格式問題

各位大大好,

如題,我想把印上浮水印的圖片做上傳的動作,接下來

我試著上傳原始圖片沒問題(formData格式),

但是上傳浮水印的會回報400(轉換完是base64格式),

但我有試著把base64轉成formData格式,似乎也會上傳失敗,

但是文件有說支援A binary file, base64 data, or a URL for an image. (up to 10MB),但不知道怎麼搞...

imgur文件:imgur api
附上原始碼:sandbox

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
海綿寶寶
iT邦大神 1 級 ‧ 2021-11-17 09:01:02
最佳解答
看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2021-11-17 11:11:48 檢舉

補充:
toDataURL轉出來的是DataURL不是base64,你得把前面的data:image/png;base64,去掉,才是base64字串。

fillano iT邦超人 1 級 ‧ 2021-11-17 11:14:59 檢舉

另外,他的response要看一下,會比400清楚。

我看到的是:

{"data":{"error":{"code":1003,"message":"File type invalid (1)","type":"ImgurException","exception":[]},"request":"\/3\/image","method":"POST"},"success":false,"status":400}

費大真是有心了,按三個/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif

感謝大大回覆,上傳問題在分離base64字串之後,貌似可以上傳了,但前面還有問題沒提到,就是

抓不到浮水印的圖檔:

  //在addWatermark之後抓DataURL
const addWatermark = () => {
    ...略
    let dataUrl = canvas.toDataURL();
    ...略
};
  //按下載按鈕取得的DataURL
const downloadImg = () => {
  ...略
  let dataUrl = canvas.toDataURL();
  ...略
};

上面兩個明明都是在加完浮水印才抓的,但是兩個的結果卻不一樣,上面是抓到奇怪的空白,而下面卻是正確的圖檔

但是我不需要下載的功能,不知道要如何改寫才能正確取得圖檔且上傳

fillano iT邦超人 1 級 ‧ 2021-11-17 17:21:21 檢舉

這一段程式有問題:

      const addWatermark = () => {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        img = document.createElement("img");
        img.onload = render;
        img.src = imgUrl;

        let dataUrl = canvas.toDataURL();
        console.log("addWatermark", dataUrl);

        //dataURL格式分離
        var block = dataUrl.split(";");
        var realData = block[1].split(",")[1]; // In this case "iVBORw0KGg...."
        formData.append("image", realData);
      };

你有看到img.onload = render?這段是要在圖片載入完才會執行,然後你底下就直接把canvas內容處理過append給formData,可惜這時的cavnas恐怕還是空的。

既然是要上傳到imgUr,那你的formData那時再產生就好了。

原來img.onload是這個意思,可是我記得之前有試著把let dataUrl = canvas.toDataURL();放到submitFile()的開頭也抓不到,但現在卻可以了....可能那時候我腦袋被撐爆了,腦袋一團亂吧XD

感謝大大/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答