iT邦幫忙

0

JavaScript和Canvas调整图片大小和裁剪图片,跳轉空白??

請教有經驗的前輩一下!
我在網路上找到這一篇 http://f2ex.cn/use-javascript-and-canvas-to-resize-the-image/

然後依照他的說明卻出現個問題,不知道是因為 js 的冒泡默認行為或是其他原因導致沒有裁減成功,詳情如,在他提供的演示案例中:

https://tympanus.net/Tutorials/ImageResizeCropCanvas/

當按下 右下角的 Crop 時,本來預期是圖片擷取在畫面上,而它卻直接跳往另一新頁面,請問我該怎麼做才能修改此一行為?

點按 Crop 按柳時 會執行的函數 crop() 如下:

crop = function(){
    var crop_canvas,
        left = $('.overlay').offset().left - $container.offset().left,
        top =  $('.overlay').offset().top - $container.offset().top,
        width = $('.overlay').width(),
        height = $('.overlay').height();
        
    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;
    
    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
    window.open(crop_canvas.toDataURL("image/png"));
}

有勞前輩指導一下!謝謝!

謝謝 @ccutmis 前輩指導,以下是更進階請教:
補上我自己 onload 以後的程式碼:(解決上傳圖片無法立即顯示問題)

<script>
    $(document).ready(function() {
        $("#avatar").on('change', function() {
            var file = $(this)[0];

            // 調用 檢查副檔名 函數
            checkFile(file);
            var limitW = '300';
            var limitH = '300';

            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            dataURL = windowURL.createObjectURL(file.files[0]);
            var img = $("#preview");
            img.attr('src', dataURL);

            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            reader.onload = function() {
                if (img[0].width < limitW) {
                    img.width(img[0].width + "px");
                    $("#info").addClass("alert-warning").show().html("圖片寬、高 都至少需要<b> 300px </b> 不夠寬 請重選");
                    return false;
                }
                if (img[0].height < limitH) {
                    img.height(limitH + "px");
                    $("#info").addClass("alert-warning").show().html("圖片 寬、高 都至少需要<b> 300px </b> 不夠高請重選");
                    return false;
                }
                reSizeableImage($('.resize-image'));
            }               
        })
    })

    // 檢查副檔名 函數
    function checkFile(sender) {
        // 可接受的附檔名
        var validExts = new Array(".GIF", ".PNG", ".JPEG", ".JPG", ".gif", ".png", ".jpeg", ".jpg");

        var fileExt = sender.value;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            alert("檔案類型錯誤,可接受的副檔名有:.gif, .png, .jpeg, .jpg");
            sender.value = null;
            return false;
        } else {
            return true;
        }
    }
</script>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
ccutmis
iT邦高手 2 級 ‧ 2021-02-07 14:18:35
最佳解答

這行

window.open(crop_canvas.toDataURL("image/png"));

改成

var tmp_img_data=crop_canvas.toDataURL("image/png");
console.log(tmp_img_data); /* 用開發者工具的console檢視變數內容 */
$("body").append('<img src="'+tmp_img_data+'" />');

試試看。按下CROP時會在網頁最底下看到圖片裁切的結果…

看更多先前的回應...收起先前的回應...

感謝 @ccutmis 前輩指導,現在已經可以存儲圖片了!謝謝!

ccutmis iT邦高手 2 級 ‧ 2021-02-07 15:19:45 檢舉

不客氣:)

@ccutmis 前輩 可以再說說嗎?
因為用戶上傳圖片時候,(EX:拍手機派照)畫面占太大,我想先設定一個適當的尺寸例如:

// 在 onload 函數 裡面
img.width(600 + "px");
img.height(400 + "px");

然後再讓用戶自己放大縮小
但是經此一設定給值以後,原來程式有的的 放大縮小功能卻已經不能正常使用,請教一下我能怎麼處理嗎?

ccutmis iT邦高手 2 級 ‧ 2021-02-07 17:10:36 檢舉

因為用戶上傳圖片時候,(EX:拍手機派照)畫面占太大,我想先設定一個適當的尺寸例如: img.width(600 + "px");...略

這樣改肯定會有問題,原作者寫成類似物件導向概念的東西,要微調就得去分析components.js裡面的 resizeableImage 物件的運作規則,太複雜的我也不太會解釋,簡單的範例給你參考:

在 components.js 裡面大概是第35行附近找到

$('.js-crop').on('click', crop);

在這行的後面加上:

resizeImage(600,400); /* 預設初始寬高600,400 */

結果如下:

    $('.js-crop').on('click', crop);
    resizeImage(600,400);

我測試過這樣可以設定初始寬高也不會影響縮放功能。

這樣是可以的,真的非常感謝提供指導。

不過還有個小問題是:剛上傳圖片以後畫面上是空的,必須拖動一下縮放框才能顯示圖片,請教一下這個能嬌嬌作法嗎?

教教

ccutmis iT邦高手 2 級 ‧ 2021-02-07 18:09:24 檢舉

剛上傳圖片以後畫面上是空的,必須拖動一下縮放框才能顯示圖片...

上傳成功把圖片帶入到img元素之後再呼叫 resizeableImage($('.resize-image')); 看看行不行

我本來就是在 onload 以後呼叫的
但是用手機直接拍照或從圖庫裡面選都正常,只有在chrome 或 其他瀏覽器上,才會出現這種情況。

ccutmis iT邦高手 2 級 ‧ 2021-02-07 20:51:46 檢舉

那就只能看你的onload部份是怎麼寫的才有辦法給建議了...

Ok!不過我現在外出了
如果方便的話我明天再po給您看看
謝謝?您喔!幫了我一個大忙

ccutmis iT邦高手 2 級 ‧ 2021-02-07 21:09:11 檢舉

不客氣:)

已經 po 在原題目最底下部份了!

ccutmis iT邦高手 2 級 ‧ 2021-02-08 13:48:39 檢舉

整理一個範例給您參考:
https://ccutmis.github.io/ithome-htm/imageResizeWithCanvas.html

你可以用檢視原始碼來看改了哪些東西。
會出現你說的問題主要在於 圖片完全載入需要一點點時間,如果沒有處理這部份會變成先呼叫 resizeableImage() 函式之後圖片才完全載入...
這部份有做處理之後,上傳圖片完成就會更新了,不過還是有其它的bug,例如頁面未刷新狀態下,如果上傳第二次會產生額外的handler(控制圖片縮放那些元素),這個要大改component.js才有辦法解決,我就先不弄了。

好的!再次感謝您了!剩下的我會想辦法解決

ccutmis iT邦高手 2 級 ‧ 2021-02-08 15:00:04 檢舉

不客氣~

我要發表回答

立即登入回答