iT邦幫忙

1

javascript 使用 drawImage()問題

目前在練習javascript 想做一些小應用
想做使用者上傳圖片後沒有使用後端,進行圖片等份切割再讓使用者下載
上網邊看教學邊做有點東拼西湊,目前問題卡在圖片切割後尺吋不對
https://ithelp.ithome.com.tw/upload/images/20190709/20110711QPrwBGVKsM.png

//上傳圖片馬上預覽圖片
pre_img.onchange = function () {
            var file = this.files;
            var reader = new FileReader();
            reader.onload = function (e) {
                img.src = e.target.result; 
            };
            reader.readAsDataURL(this.files[0]);
        }
//計算上傳圖片尺寸和切割需尺寸
 function img_size() {
            if (typeof img.naturalWidth == "undefined") {
                // IE 6/7/8
                var i = new Image();
                i.src = img.src;
                var rw = i.width;
                var rh = i.height;
            } else {
                // HTML5 browsers
                var rw = img.naturalWidth;
                var rh = img.naturalHeight;
            }

            console.log('圖片大小 :' + rw + '*' + rh);
            text.innerHTML = '<br>' + '圖片尺寸 W:' + rw + ' H:' + rh;
            //cut_h,cut_w 是每段切割後的尺寸
            cut_h = parseInt(rh / oH.value); //oH.value 是使用者想要分切幾段
            cut_w = parseInt(rw / oW.value); //oW.value 是使用者想要分切幾段 
        }
//進行切割繪圖
function draw() {
            img_size();
            for (var i = 0; i < oH.value; i++) {
                console.log('第一層start');
                for (var j = 0; j < oW.value; j++) {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(document.getElementById('source'),
                        cut_w * j, cut_h * i, cut_w, cut_h, 0, 0,cut_w,cut_h);
                    console.log('切割圖片大小 :' + cut_w + '*' + cut_h);
                    cut_img.appendChild(canvas)
                }
            }
        }
//下載按鈕點擊後 把所有切割後的都自動下載
//toBlob 還不太懂 目前想成把canvas轉各式圖檔
        var download = document.getElementById('download');
        var canvas_ = document.getElementsByTagName('canvas');
        download.onclick = function () {
            var i = 0;
            for (var k = 0; k < canvas_.length; k++) {
                var img = canvas_[k].toDataURL("image/png");
                var blob = canvas_[k].toBlob(blob => {
                    // 有了blob我們就可以使三 URL.createObjectURL建立url
                    var url = URL.createObjectURL(blob)
                    var link = document.createElement('a')
                    link.innerText = 'Download'
                    link.href = url // 將url 設定給 a tage 的 href
                    link.download = i + '.png'    // 設定 download name
                    cut_img.appendChild(link) // 加到指定元素之中,即可點擊下載
                    link.click();
                    link.remove();
                    i++;
                })
            }
        }

想問請問切割後下載下來的圖片尺寸都是300*150 但是不是因該是下面這段程式碼中最後兩個參數 cut_w,cut_h 來繪製切割後的大小嗎?

ctx.drawImage(document.getElementById('source'),
       cut_w * j, cut_h * i, cut_w, cut_h, 0, 0,cut_w,cut_h);
fillano iT邦超人 1 級 ‧ 2019-07-09 09:13:35 檢舉
canvas長寬沒設定的關係吧?

2 個回答

2
dragonH
iT邦大師 1 級 ‧ 2019-07-09 11:20:00
最佳解答

codepen

無聊寫的

你的問題應該就是像 fillano 大 說的

沒有設定 canvas 的 長與寬

所以根據 w3 的文件

你最後才會得到 300 * 150 的大小

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-09 14:43:09

說真的,這根本不需要用到canvas。css就可以做到這件事了。
為何要搞到那麼麻煩?

ccutmis iT邦高手 9 級 ‧ 2019-07-09 17:54:08 檢舉

/images/emoticon/emoticon30.gif

我要發表回答

立即登入回答